我开始构建一个组件库，我想通过使用create-react-app. 不幸的是，create-react-app默认配置似乎不支持构建此类组件库（请参阅 这些 问题）。所以看来我必须弹出。
您是否有一些说明在弹出后要配置什么以使其成为我可以在其他应用程序中重用的组件库（我猜是一些 Webpack 的东西）？
弹出后create-react-app的配置构建组件库
IT技术
reactjs
npm
webpack
create-react-app
2021-04-13 00:59:42
3个回答
将我的评论重新定义为答案。
不要弹出！CRA 在引擎盖下隐藏了很多东西，并且弹出会抛出它。src在完成工具设置后，将您的项目克隆到另一个项目中相对容易一些。
自己设置一个也不是很难！以下是您需要做的事情：
基本的babel 和 webpack 配置，以便您的代码编译。
确保 React 和 React-DOM 作为外部依赖项添加到 package.json 文件中，并作为别名添加到 webpack.config.js 中。（这里有一个彻底的讨论。）这对于确保您只运送最小的捆绑包很重要。此外，React 不能很好地处理多个副本。
或者，对任何其他较重的库执行相同的操作，例如 Material-UI、Bootstrap、Lodash 等。
在 webpack 的配置中，决定你希望你的库导出应该如何？你应该对 UMD 很好。
添加
main（和可选module）条目，package.json让 npm 导入知道应该从哪里导入组件。发布它。
完毕！
或者，您可以简单地克隆这些超薄组件项目之一并将您的组件放在那里 -
还有更完整的入门套件，但 IMO 在将它们抽象出来之前首先自己了解细节很重要。一旦你熟悉了这个过程，你也应该尝试利用这些工具包，因为它们远远超出了基础，比如测试集成、react-storybook 支持和强大的 npm 发布支持。
更新：
CRA 的目的是允许快速实验和入门 React 开发，而无需经过（对初学者来说有点复杂）工具设置。CRA 的预期用例，如名称中的“应用程序”所示，是整个应用程序，而不是一个组件。尽管开发基于 ES6 等语言功能构建的任何东西都需要一些工具，但应用程序通常需要比组件更多的设置。例如，您还需要一个托管生成代码的服务器组件。CRA为您完成所有这些以及更多工作。
如果你正在开发一个应用程序，当你想要控制它的服务器端时，你会弹出。在这种情况下，它会增加value，因为您将在弹出期间获得 CRA 自动生成的基本托管代码。
为了满足测试需求，CRA 还集成了 Jest，这是一个具有 React 特定功能（如快照测试）的测试运行器。同样，使用您的构建管道手动设置它是少数，而 CRA 再次向您隐藏了所有这些复杂性，因此您可以专注于编写测试。
这非常简单——如果你想发布一个包，你实际上并不需要 webpack。如果您不想，请不要为此安装它。
如果你使用 ES6：
您可以使用一个简单的脚本创建一个 dist 文件夹，babel 将在转译后创建文件：
"scripts": {
// other scripts
// .. might want to change "rm -rf" below if you're on a PC
"build:production": "rm -rf es && cross-env NODE_ENV=production node_modules/.bin/babel ./src -d es"
},
它的作用是：
- 删除
es文件夹，这是一个构建文件夹。 - 为您的文件运行 babel（如果它们位于
src文件夹中，请将其更改为您的文件所在的任何位置）并使用转换后的es文件创建文件夹。
为了使用上面的脚本，您需要安装以下依赖项：
babel-cli/ babel-core/ babel-preset-es2015/cross-env
确保你有一个.babelrc文件，以便 babel 可以工作：
{
"presets": [
["es2015", { "modules": false }]
]
}
现在你所要做的（运行后npm run build:production）就是运行：
npm publish
并且您的库发布在npm. 如果你想更新，这也是你运行的命令，只是不要忘记更新你的package.json.
如果您有不想发布到npm的文件，只需在您的根目录中有一个名为.npmignore（类似于.gitignore）的文件并列出您想要排除的所有内容。
如果你不使用 ES6：
在这种情况下，您不需要转译任何内容，只需直接转到npm publish上面的部分并在您要发布的根文件夹上运行它。
create-react-app用于快速设置和开发应用程序，而不是真正用于开发库。一方面，在构建时create-react-app创建一个index.html文件，这通常是库不需要的。库需要一组不同的配置（少得多）。
我自己也遇到过这个问题，并在参考了流行的 ES6 库（例如Redux）的编写方式后，编写了一个用于编写和发布 React 组件的 React 组件样板：https : //github.com/yangshun/react-component-starter。
优点：
- 类似于
create-react-app，包括电池 - 它涵盖了所有重要领域：开发、linting、测试和分发
- 最低配置
- Babel 用于转译为 ES5 和 CommonJS 格式
- 包含和配置 ESLint
- Jest 测试示例
- 编译为 UMD 的 Webpack 配置
- React Storybook 用于快速开发组件
- 支持与组件一起分发样式表
缺点：
- 在工具选择方面高度自以为是；他们遵循由 设置的选择
create-react-app。 - 将来必须手动更新每个包的依赖项（如果您这样做，您将面临此问题
eject）
包含最少的配置，设置很容易。各种 webpack、Babel 和 ESLint 配置应该很好理解。
希望这对你有帮助。请随意就如何改进它提出建议和意见。