Question

我开始构建一个我想在NPM上发布的组件库（并在其他应用程序中重用），方法是使用create-react-app创建一个React应用程序。遗憾的是，create-react-app默认配置似乎不支持构建此类组件库（see these issues）。所以我似乎要弹出。

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

Answer 1

将我的评论重新构思成答案。

不要弹出！ CRA在引擎盖下隐藏了很多东西并且弹出它。使用工具设置将src克隆到另一个项目中相对容易一些。

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

基本babel and webpack configuration所以您的代码会编译。
确保将React和React-DOM作为外部依赖项添加到package.json文件中，并在webpack.config.js中添加为别名。（详尽的讨论是here。）这对于确保您只发送最小的包很重要。此外，React与multiple copies并不合适。
可选地，对任何其他较重的库执行相同操作，例如： Material-UI，Bootstrap，Lodash等。
在网络包的配置中，确定您的library exports应该如何？你应该对UMD很好。
在main中添加module（and optionally package.json）条目，让npm导入知道应从哪里导入组件。
< / LI>
Publish它。
完成！

或者，您可以简单地克隆其中一个超薄组件项目并将组件放入其中 -

还有更完整的入门套件，但IMO在您抽象之前首先了解详细信息非常重要。一旦熟悉了这个过程，你就应该尝试利用这些工具包，因为它们远远超出了基础知识，例如测试集成，反应 - 故事书支持和出色的npm发布支持。

<强>更新

CRA的目的是允许快速实验和加入React开发，而无需通过（有点复杂到初学者）工具设置。 CRA的预期用例，由＆＃34; App＆＃34;在名称中，是整个应用程序，而不是组件。虽然开发基于ES6等语言功能的任何东西都需要一些工具，但是应用程序通常需要比组件更多的设置。例如。您还需要一个托管生成代码的服务器组件。 CRA为您做all this and more。

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

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

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

create-react-app用于快速设置和开发应用程序，而不是用于库的开发。首先，create-react-app在构建时会创建一个index.html文件，这通常不需要库。库需要一组不同的配置（更少）。

我自己遇到了这个问题，在编写和发布React组件后编写了一个React组件样板文件：https://github.com/yangshun/react-component-starter，引用了ES6库的流行程度，例如Redux。

<强>优点：

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

<强>缺点：

在选择工具方面高度自以为是;他们遵循create-react-app。
将来必须手动更新每个软件包依赖项（如果您eject仍然遇到此问题）

包含最少的配置，设置很简单。各种webpack，Babel和ESLint配置应该是可以理解的。

希望这会对你有所帮助。随意提出有关如何改进的建议和意见。

在弹出以构建组件库之后配置create-react-app

3 个答案: