reactjs - 弹出构建组件库后create-react-app的配置

Question

我开始构建一个组件库，我想通过使用 create-react-app 创建一个 React 应用程序来在 NPM 上发布(并在其他应用程序中重用)。 。不幸的是，create-react-app 默认配置似乎不支持构建此类组件库( see these issues )。所以看来我必须弹出。

您是否有一些说明，在弹出后要配置什么，使其成为我可以在其他应用程序中重用的组件库(我猜是一些 Webpack 的东西)？

Answer 1

将我的评论重新构建为答案。

不要弹出! CRA 在引擎盖下隐藏了很多东西，弹出时会将其抛出。在完成工具设置后，将 src 克隆到另一个项目中相对更容易。

而且自己设置一个也不是很困难!以下是您需要做的事情:

1. 基本 babel and webpack configuration所以你的代码可以编译。

2. 确保 React 和 React-DOM 作为外部依赖项添加到 package.json 文件中，并作为别名添加到 webpack.config.js 中。 (完整的讨论是 here 。)这对于确保您只运送最小的 bundle 非常重要。此外，React 与 multiple copies 配合得不好。 .

3. (可选)对任何其他较重的库执行相同的操作，例如Material-UI、Bootstrap、Lodash 等

4. 在 webpack 的配置中，决定您想要的 library exports应该？你应该擅长UMD。

5. 在 package.json 中添加 main ( and optionally module) 条目，让 npm 导入知道组件应该在哪里导入自。

6. Publish它。

7. 完成!

或者，您可以简单地克隆这些超薄组件项目之一并将您的组件放入其中 -

• https://github.com/wangzuo/react-progress-label
• https://github.com/aaronshaf/react-toggle

还有更完整的入门工具包，但在我看来，在抽象它们之前首先自己了解细节很重要。一旦您熟悉了该流程，您也应该尝试利用这些工具包，因为它们远远超出了基础知识，例如测试集成、react-storybook 支持和出色的 npm 发布支持。

更新:

CRA 的目的是允许快速实验和入门 React 开发，而无需完成(对于初学者来说有些复杂的)工具设置。 CRA 的预期用例(如名称中的“应用程序”所示)是整个应用程序，而不是组件。尽管开发任何基于 ES6 等语言功能构建的东西都需要一些工具，但应用程序通常比组件需要更多的设置。例如。您还需要一个托管生成代码的服务器组件。 CRA 确实 all this and more为你。

如果你正在开发一个应用程序，当你想控制它的服务器端时，你就会弹出。在这种情况下，它会增加值(value)，因为您将在弹出期间获得 CRA 自动生成的基本托管代码。

为了满足测试需求，CRA 还集成了 Jest，这是一个具有 React 特定功能(例如快照测试)的测试运行器。同样，使用构建管道手动设置它很困难，CRA 再次向您隐藏了所有这些复杂性，因此您可以只专注于编写测试。