为 NPM 创建模块化组件库包答案

【问题标题】：Creating a modular component library package for NPM为 NPM 创建模块化组件库包
【发布时间】：2017-03-01 19:47:40
【问题描述】：

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

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

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

import Widget from 'components/Widget';

代替

import {Widget} from 'components';

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

谢谢。

【问题讨论】：

第一个表示法从模块 components/Widget 导入默认导出。第二种表示法从组件模块中导入一个名为 Widget 的命名导出。如果您在“组件”文件夹下没有 Widget.js，则第一个表示法将不起作用：exploringjs.com/es6/ch_modules.html
谢谢。我已经有了这些，但我错误地假设将我的入口点设置为子目录会使其成为我包的根目录。终于想通了。

【解决方案1】：

当然，在提出我的问题几分钟后，我就解决了这个问题：

首先，正如 Yacine Filali 对我上面的问题所评论的那样，我需要拥有单独的文件才能使其正常工作（这部分我已经想通了）。

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

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

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

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

【讨论】：

【解决方案2】：

在您的组件中：

export default Widget

在您的索引中：

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

【讨论】：