弹出以构建组件库后对create-react-app的配置 [英] Configuration for create-react-app after ejecting to build a component library
问题描述
我开始通过使用 create-react-app 。不幸的是， create-react-app 默认配置似乎不支持构建此类组件库（请参阅 这些 问题）。因此，看来我必须退出。
I started to build a component library that I want to publish on NPM (and reuse in other apps) by creating a React app using create-react-app. Unfortunately the create-react-app default configuration doesn't seem to support building such component libraries (see these issues). So it seems I have to eject.
在退出后，您是否有一些说明要配置什么，以使其成为可以在其他应用程序中重用的组件库（我想有些Webpack
Do you have some instructions what to configure after ejecting to make this a component library I can reuse in other apps (I guess some Webpack stuff)?
推荐答案
将我的评论重新整理成答案。
Re-framing my comments into an answer.
不要弹出！ CRA将很多东西藏在引擎盖下，弹出会把它扔掉。完成工具设置后，将 src 克隆到另一个项目中相对容易。
Don't eject! CRA hides a lot of stuff under the hood and ejecting throws it up. It's relatively easier to just clone your src into another project with the tooling setup done.
这并不是很难自己设置一个！这是您需要做的事情：
And it's not very difficult to setup one yourself! Here's the things you will need to do:
-
基本 Babel和Webpack配置，以便您的代码得以编译。
Basic babel and webpack configuration so your code compiles.
确保将React和React-DOM作为外部依赖项添加到package.json文件中，并作为别名添加到webpack.config.js中。 （完整的讨论是此处。）这对于确保仅运送最小的捆绑包非常重要。 。另外，React在多份副本中不能很好地发挥作用。
Make sure React and React-DOM are added as external dependencies in your package.json file and added as alias in your webpack.config.js. (A thorough discussion is here.) This is important to ensure you ship the smallest bundles only. Also, React doesn't play well with multiple copies.
可选地，对任何其他较重的库执行相同的操作，例如Material-UI，Bootstrap，Lodash等。
Optionally, do the same for any other heavier libraries, e.g. Material-UI, Bootstrap, Lodash etc.
在webpack的配置中，决定您希望图书馆出口应该是？您应该对UMD很好。
In webpack's configuration, decide how you want your library exports should be? You should be good with UMD.
添加 main （以及中的 module ）项package.json 让npm导入知道应从何处导入组件。
Add main (and optionally module) entries in your package.json to let npm imports know where the components should be imported from.
发布它。
完成！ / p>
Done!
或者，您可以简单地克隆这些超薄组件项目之一，然后将组件放入其中-
Or, you can simply clone one of these super thin component projects and put in your components there -
- https://github.com/wangzuo/react-progress-label
- https://github.com/aaronshaf/react-toggle
还有更完整的入门套件，但国际海事组织重要的是要先了解细节在将它们抽象出来之前先做好准备。一旦熟悉了该过程，就应该尝试利用这些工具包，因为它们远远超出了基础知识，例如测试集成，react-storybook支持和出色的npm发布支持。
There are more complete starter-kits as well, but IMO it's important to first know the details yourself before you abstract them away. Once you are familiar with the process, you should try leveraging the kits too as they go much beyond the basics, like test integration, react-storybook support and great npm publishing support.
更新：
CRA的目的是允许快速试验和入门进行React开发，而无需经历（有些复杂（适合初学者）工具设置。 CRA的预期用例（如名称中的 App所示）是整个应用程序，而不是组件。尽管开发基于ES6之类的语言功能构建的东西都需要一些工具，但与组件相比，应用程序通常需要更多的设置。例如。您还需要一个服务器组件来托管生成的代码。 CRA会为您所有这一切以及更多。
The purpose of CRA is to allow quick experimentation and on-boarding to React development, without going through the (somewhat complicated to a beginner) tooling setup. The intended use case of CRA, as denoted by the "App" in the name, is the whole app, not a component. Although developing anything built on language features like ES6 takes some tooling, an app typically takes more setup than a component. E.g. you also need a server component which hosts the generated code. CRA does all this and more for you.
如果您正在开发应用程序，则当您希望控制其服务器端时会弹出。在这种情况下，它会增加价值，因为您将获得CRA在弹出期间自动生成的基本托管代码。
And if you are working on an app, you will eject when you want to take control of the server side of it. It adds value in that case as you will get the basic hosting code auto-generated by CRA during eject.
为满足测试需求，CRA还具有Jest集成，这是具有React特定功能（例如快照测试）的测试运行程序。同样，使用构建管道手动设置它很少，而CRA再次向您隐藏了所有这些复杂性，因此您只需专注于编写测试即可。
To address test needs, CRA also has Jest integration, which is a test runner having React specific features like snapshot testing. Again, setting it up manually with your build pipeline is a handful and CRA once again hides all of this complexity from you, so you can simply focus on writing the tests.
这篇关于弹出以构建组件库后对create-react-app的配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
