从npm包的子文件夹导入

11 浏览
0 Comments

从npm包的子文件夹导入

我一直在创建一个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

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 };

其他项目

// 在导入后，该项目负责构建/转译

import { Button, ButtonGroup } from 'components-library/Button';

示例

Material-UI是一个React组件库，通过以下方式引用：import { RadioButtonGroup } from 'material-ui/RadioButton。我尝试过弄清楚他们是如何实现的，但迄今为止还没有成功。

类似问题

- How would I import a module within an npm package subfolder with webpack?

这个问题几乎是我需要的正确方法，只是导入路径中使用了src/目录，而我希望避免使用它（应该是component-library/item，而不是component-library/src/item（目前的方式虽然可行））

- Publishing Flat NPM Packages

这正是我想要的，只是我希望在包中不需要"构建"阶段（依赖于导入位置来构建/转译）

问题

1. 是否可以在导入路径中跳过src/目录？

2. 是否可以在包中跳过任何构建阶段（开发人员在提交之前不需要构建）？

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

0