在弹出以构建组件库之后配置create-react-app

Question

我开始构建一个我想在NPM上发布的组件库(并在其他应用程序中重用),通过使用创建一个React应用程序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. 在你的npm导入中添加main(和可选 module)条目,package.json知道应该从哪里导入组件.

6. 发布它.

7. 完成!

或者,您可以简单地克隆其中一个超薄组件项目并将组件放入其中 -

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

还有更完整的入门套件,但IMO在您抽象之前首先了解详细信息非常重要.一旦熟悉了这个过程,就应该尝试利用这些工具包,因为它们远远超出了基础知识,例如测试集成,反应 - 故事书支持和出色的npm发布支持.

更新:

CRA的目的是允许快速实验和加入React开发,而无需经过(有点复杂到初学者)工具设置.CRA的预期用例,如名称中的"App"所示,是整个应用程序,而不是组件.虽然开发基于ES6等语言功能的任何东西都需要一些工具,但是应用程序通常需要比组件更多的设置.例如,您还需要一个托管生成代码的服务器组件.CRA 为您做了所有这些以及更多.

如果您正在使用某个应用程序,当您想要控制它的服务器端时,您将弹出.在这种情况下,它会增加价值,因为您将获得CRA在弹出期间自动生成的基本托管代码.

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