从npm包的子文件夹导入 [英] Import from subfolder of npm package

问题描述

我一直致力于创建一个React组件的小型库，以便在其他几个项目中使用。我在内部发布包（使用私有GitHub存储库），然后包含在另一个项目中。但是，当我从包的子目录导入时，我无法这样做，因为路径不匹配。

使用包的项目都利用webpack捆绑/转换代码，因为我试图避免在可能的情况下在组件库中进行任何构建。

目录结构

   -  package.json 
  -  src / 
  -  index.js 
  -  Button / 
 -  index.js 
  -  Button.jsx 
  -  ButtonGroup.jsx 
  -  Header / 
  -  index.js 
  -  Header.jsx（默认导出）
  

package.json

  ... 
main：。/ src / index.js，
scripts：，
 ... 
  

src / Button / index.js

 从'./Button'导入按钮; 
从'./ButtonGroup'导入ButtonGroup; 
 
导出默认按钮; 
 
 export {Button，ButtonGroup}; 
  

src / index.js

如果仅从子目录导入，这个文件是否真的有必要？

 从'./Button'导入按钮; 
从'./Button/ButtonGroup'导入ButtonGroup; 
从'./Header'导入标题; 
 
 export {Button，ButtonGroup，Header}; 
  

其他项目

  //从'components-library / Button'导入
 import {Button，ButtonGroup}后，该项目负责构建/转换; 
  

示例

Material-UI 是一个React组件库，通过以下方式要求使用： import来自'material-ui / RadioButton 的{RadioButtonGroup}。我试图弄清楚它是如何为它们起作用但是没有用。

类似的问题

• 我如何在带有webpack的npm包子文件夹中导入模块？
  
  
  
  
  • 这几乎是我需要的正确方法，除了在那里使用的导入路径涉及 src / 目录，我试图避免（应该是 component-library / item ，不是 component-library / src / item （虽然目前有效））
  
  


• 发布Flat NPM软件包
  
  
  
  
  • 这正是我想要的，除了我希望包中没有构建阶段（依赖于导入locatio） ns to build / transpile）
  
  

问题

1. 我可以在导入路径中以某种方式跳过 src / 目录吗？


2. 我可以跳过包中的任何类型的构建阶段（因此开发人员在提交之前不必构建）吗？


3. 类似于material-ui的包如何处理这个？

解决方案

答案可能取决于您安装组件库的方式。如果你是通过 npm install< git-host>：< git-user> /< repo-name> 或 npm install来完成的< git repo url> ，

1. 你应该可以根据您的第一个链接问题，从'component-library / Button'导入{Button} 。与 Node的require（）解析类似，Webpack应解析组件库中的子目录相对于组件库的入口点。您可以通过 webpack.config.resolve 属性找到有关自定义解决方案行为的文档。 material-ui 似乎依赖于解析模块入口目录中的子目录导入。 / p>




2. 要分发ES模块库，在分发之前无需构建。但是，项目如 create-react-app 可能需要预先编译的版本。

或者，您可以从'components-library'中编写 import {Button}。
Webpack将通过每个索引追溯依赖关系，而不用大惊小怪。

I've been working on creating a small library of React components for use in several other projects. I am publishing the package internally (using a private GitHub repository) and then including in another project. However, when I go to import from a subdirectory of the package I am not able to do so as the paths don't match.

The projects using the package all utilize webpack to bundle/transpile code as I am trying to avoid doing any building in the component library if possible.

Directory Structure

- package.json
- src/
  - index.js
  - Button/
    - index.js
    - Button.jsx
    - ButtonGroup.jsx
  - Header/
    - index.js
    - Header.jsx (default export)

package.json

...
"main": "./src/index.js",
"scripts": "",
...

src/Button/index.js

import Button from './Button';
import ButtonGroup from './ButtonGroup';

export default Button;

export { Button, ButtonGroup};

src/index.js

Is this file actually necessary if only importing from subdirectories?

import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';

export { Button, ButtonGroup, Header };

Other Project

// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';

Example

Material-UI is a library of React components that is used by requiring in the following fashion: import { RadioButtonGroup } from 'material-ui/RadioButton. I've tried to figure out how this works for them but to no avail yet.

Similar Questions

• How would I import a module within an npm package subfolder with webpack?
  • This is very nearly the correct approach I require, except that the import path used there involved the src/ directory, which I am trying to avoid (should be component-library/item, not component-library/src/item (which does work currently though))
• Publishing Flat NPM Packages
  • This is exactly what I want except that I was hoping to not have a "build" phase in the package (rely on importing locations to build/transpile)

Questions

1. Can I skip the src/ directory somehow in the import path?
2. Can I skip any type of build phase in the package (so developers don't have to build before committing)?
3. How does a package similar to material-ui handle this?

解决方案

The answer may depend on how you installed your components library. If you did it via either npm install <git-host>:<git-user>/<repo-name> or npm install <git repo url>,

1. You should be able to import {Button} from 'component-library/Button' as is, according to your first linked question. Similar to Node's require() resolution, Webpack should resolve subdirectories within component-library relative to component-library's entry point. You can find the docs on customizing the resolution behavior via the webpack.config.resolve property. material-ui seems to rely on resolving subdirectory imports from the module entry directory.

2. To distribute an ES module library, there's no need for building before distribution. However, projects such as create-react-app may need a pre-transpiled version.

Alternately, you can write import {Button} from 'components-library'. Webpack will trace the dependencies back through each index without a fuss.

这篇关于从npm包的子文件夹导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！