小编典典

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

reactjs

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

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


阅读 311

收藏
2020-07-22

共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. 做完了!

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

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

更新:

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

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

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

2020-07-22