弹出后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 配置，以便您的代码编译.
确保 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.
发布.
完成！
或者，您可以简单地克隆这些超薄组件项目之一并将您的组件放在那里 -
Or, you can simply clone one of these super thin component projects and put in your components there -
还有更完整的入门套件，但 IMO 在将它们抽象出来之前首先自己了解细节很重要.一旦您熟悉了该过程，您也应该尝试利用这些工具包，因为它们远远超出了基础知识，例如测试集成、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 的预期用例，如名称中的应用程序"所示，是整个应用程序，而不是一个组件.尽管开发基于 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屋！
