弹出构建组件库后create-react-app的配置

Question

我开始构建一个组件库，我想通过使用 create-react-app. Unfortunately the create-react-app default configuration doesn't seem to support building such component libraries (see these issues 创建一个 React 应用程序在 NPM 上发布（并在其他应用程序中重用）。所以看来我得弹出了。

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

Answer 1

create-react-app 用于快速设置和开发应用程序，而不是真正用于库的开发。一方面，create-react-app 在构建时创建了一个 index.html 文件，图书馆通常不需要它。库需要一组不同的配置（少得多）。

我自己也遇到过这个问题，并编写了一个 React 组件样板来编写和发布 React 组件：https://github.com/yangshun/react-component-starter, after referencing how popular ES6 libraries were written, such as Redux.

优点：

类似于create-react-app，包括电池
它涵盖了所有重要领域：开发、linting、测试和分发
最低配置
用于转译为 ES5 和 CommonJS 格式的 Babel
包含并配置了 ESLint
Jest 测试示例
编译为UMD的Webpack配置
用于快速开发组件的 React Storybook
支持与组件一起分发样式表

缺点：

在选择工具方面非常自以为是；他们遵循 create-react-app.
以后必须手动更新每个包依赖项（如果你这样做，你将面临这个问题 eject 无论如何）

包含最少的配置，设置也很简单。 webpack、Babel、ESLint 的各种配置应该很好理解。

希望对您有所帮助。欢迎就如何改进提出建议和意见。

Answer 2

这非常简单——如果你想发布一个包，你实际上不需要 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 部分，然后运行将其放在您要发布的根文件夹中。

Answer 3

将我的评论重新组织成一个答案。

不要弹射！ CRA 在引擎盖下隐藏了很多东西，弹出时会抛出它。将您的 src 克隆到另一个已完成工具设置的项目中相对容易一些。

而且自己设置一个也不是很难！以下是您需要做的事情：

基本 babel and webpack configuration 因此您的代码可以编译。
确保 React 和 React-DOM 作为外部依赖项添加到 package.json 文件中，并作为别名添加到 webpack.config.js 中。（彻底的讨论是 here.) This is important to ensure you ship the smallest bundles only. Also, React doesn't play well with .
可选地，对任何其他较重的库执行相同的操作，例如Material-UI, Bootstrap, Lodash 等
在 webpack 的配置中，决定你的 library exports 应该如何？你应该会UMD吧
在您的 package.json 中添加 main (and optionally module) 条目，让 npm imports 知道应该从哪里导入组件。
Publish吧。
完成！

或者，您可以简单地克隆这些超薄组件项目之一并将您的组件放在那里 -

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

更新：

CRA 的目的是允许快速实验和入门 React 开发，而无需通过（对初学者来说有点复杂）工具设置。 CRA 的预期用例，如名称中的 "App" 所示，是整个应用程序，而不是组件。尽管开发任何基于 ES6 等语言特性的东西都需要一些工具，但应用程序通常比组件需要更多的设置。例如。您还需要一个托管生成代码的服务器组件。 CRA 为您 all this and more

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

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

弹出构建组件库后create-react-app的配置

Configuration for create-react-app after ejecting to build a component library

npm

reactjs

webpack

create-react-app