我一直在创建一组小型的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/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 };
其他项目
// 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包
- 这正是我想要的,只是我希望不必在包中有“构建”阶段(依赖于导入位置来构建/编译)
问题
- 我可以在导入路径中跳过
src/
目录吗? - 我能否跳过包中的任何类型的构建阶段(以便开发人员在提交之前不必构建)?
- 与material-ui类似的软件包如何处理这个问题?
Material-UI
是如何实现通过import npm-package/subfolder/Component
的方式导入src/subfolder/Component
组件的? - tonixsrc
目录 (https://github.com/tonix-tuft/react-js-utl)。我在项目的根目录下创建了ES6源代码的子文件夹,并将这些文件夹发布到NPM上,但我想这并不是最优解(例如,ES6导出在Node服务器端不起作用)... 不过这样做,我可以使用react-js-utl/subfolder
语法导入所需的文件。顺便说一句,祝您新年快乐!谢谢。 - tonix