从npm包的子文件夹导入

Question

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

使用该软件包的项目都利用webpack捆绑/转换代码,因为我试图避免在组件库中进行任何构建(如果可能).

目录结构

- 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 /按钮/ index.js

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

export default Button;

export { Button, ButtonGroup};

SRC/index.js

如果只从子目录导入,这个文件真的是必要的吗？

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

export { Button, ButtonGroup, Header };

其他项目

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

例

Material-UI是React组件库,通过以下方式要求使用:import { RadioButtonGroup } from 'material-ui/RadioButton.我试图弄清楚这对他们有用,但无济于事.

类似的问题

• 如何使用webpack在npm包子文件夹中导入模块？
  • 这几乎是我需要的正确方法,除了那里使用的导入路径涉及src/目录,我试图避免(应该是component-library/item,不是component-library/src/item(虽然目前工作))
• 发布平面NPM包
  • 这正是我想要的,除了我希望在包中没有"构建"阶段(依赖于导入位置来构建/转换)

问题

1. 我可以src/在导入路径中以某种方式跳过目录吗？
2. 我可以跳过包中的任何类型的构建阶段(因此开发人员在提交之前不必构建)吗？
3. 类似于material-ui的包如何处理这个？

Answer 1

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

是的。使用 package.json"exports"字段，Webpack 应该会在不久的将来支持该字段（请参阅此问题），但自 Node 12 LTS 以来，根据裸模块说明符决议提案，Node 已支持该字段：

包.json

...
"main": "./src/index.js",
"type": "module",
...
"exports": {
  "./Button": "./src/Button/index.js",
  "./Header": "./src/Header/index.js"
},
...

现在，以下代码：

...
"main": "./src/index.js",
"type": "module",
...
"exports": {
  "./Button": "./src/Button/index.js",
  "./Header": "./src/Header/index.js"
},
...

应该翻译成：

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

这应该正确导入请求的模块。

警告

现在，尝试一个更简单的版本肯定很诱人，比如：

...
"exports": {
  "./Button": "./src/Button/",
  "./Header": "./src/Header/"
},
...

所以作为通常的导入语句

import { Button, ButtonGroup } from 'components-library/src/Button/index.js';

被翻译成

...
"exports": {
  "./Button": "./src/Button/",
  "./Header": "./src/Header/"
},
...

这看起来不错，但在这种情况下它不起作用，因为您的子模块没有自己的package.json文件，而是依赖于index.js要找到的文件。

/!\ 与 CommonJS 不同，没有自动搜索 index.js 或 index.mjs 或文件扩展名。

src/index.js - 如果只从子目录导入，这个文件真的有必要吗？

我不这么认为，但如果你愿意，你可以保留它。

我可以跳过包中的任何类型的构建阶段吗？

使用该"exports"字段不需要您转译您的代码。