弹出以构建组件库后，对create-react-app进行配置

Question

我开始通过使用创建一个React应用程序来构建要在NPM上发布（并在其他应用程序中重用）的组件库create-react- app。不幸的是，create- react-app默认配置似乎不支持构建此类组件库（请参阅 这些 问题）。所以看来我必须退出。

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

Answer 1

重新将我的评论变成答案。

不要弹出！CRA将很多东西藏在引擎盖下，弹出会把它扔掉。src完成工具设置后，将您的克隆到另一个项目相对容易。

并且自己设置一个不是很困难！这是您需要做的事情：

1. 基本的babel和webpack配置，因此您的代码可以编译。

2. 确保将React和React-DOM作为外部依赖项添加到package.json文件中，并作为别名添加到webpack.config.js中。（这里有一个详尽的讨论。）这对于确保仅运送最小的捆束非常重要。另外，React不能很好地与多个副本配合使用。

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

4. 在webpack的配置中，决定您希望库导出的方式如何？您应该对UMD感到满意。

5. 在您的文件中添加main（和可选的 module）条目，package.json以使npm导入了解应从何处导入组件。

6. 发布它。

7. 做完了！

或者，您可以简单地克隆这些超薄组件项目之一，然后在其中放置组件-

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

也有更完整的入门工具包，但是IMO重要的是要先了解自己的细节，然后再将其抽象出来。一旦熟悉了过程，就应该尝试利用这些工具包，因为它们远远超出了基础知识，例如测试集成，react-
storybook支持和强大的npm发布支持。

更新：

CRA的目的是允许快速实验和入门进行React开发，而无需经历（对于初学者来说有些复杂）工具设置。CRA的预期用例（如名称中的“
App”所示）是整个应用程序，而不是组件。尽管开发基于ES6之类的语言功能构建的东西需要一些工具，但与组件相比，应用程序通常需要更多的设置。例如，您还需要一个服务器组件来托管生成的代码。CRA会为您做所有这一切。

而且，如果您正在开发应用程序，则当您希望控制应用程序的服务器端时将弹出该应用程序。在这种情况下，它会增加价值，因为您将获得CRA在弹出期间自动生成的基本托管代码。

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