为NPM创建模块化组件库包

Question

我目前正在创建一个npm包，它将包含一系列React组件，这些组件对于我正在维护的某些应用程序是通用的。

我的目的是能够根据需要单独导入这些组件，而不是一次导入。所以，例如，如果我有组件Accordion，DropDown和Widget，但我只使用其中一个，我只想要它的代码。

我的理解是我需要能够做类似

的事情

import Widget from 'components/Widget';

而不是

import {Widget} from 'components';

但我不能让第一个版本起作用。我还没有发布这个包，所以我使用 npm link 在另一个应用程序上测试它。我甚至不确定谷歌会自己解决这个问题，所以我也很欣赏有关此问题的相关文档的链接。

感谢。

Answer 1

所以，当然在问我问题后几分钟我就解决了这个问题：

首先，正如Yacine Filali对我上面的问题所做的评论，我需要有个别文件才能实现这一点（这部分我已经想到了）。

但是，我错误地认为我的包的根目录将被设置为我的条目文件所在的目录。所以在package.json中我设置了

"main": "./lib/index.js"

错误地假设将从那里读取文件夹结构。在改变我的配置以将所有内容构建到根目录之后，它完美地运行了。

（当然，我现在正在开发更好的替代方案，比如为lib文件夹生成package.json）

Answer 2

在您的组件中：

export default Widget

在你的索引中：

export { default as Component } from './Component'