使用create-react-app创建一个库

Question

我正在尝试创建一个React-Redux库，并尝试使用create-react-app获取样板代码，但它包含了一些不相关的构建脚本，例如appHtml。

有没有办法将已弹出的create-react-app转换为库 - 特别是我需要不将所有js文件打包到一个文件中，而是通过babel传递它们并为每个React组件生成单独的文件？

- Ido Ran

Answer 1

我成功地在不弹出窗口并且不使用create react app的内部依赖项的情况下构建了库。我已经用react-scripts@0.9.5进行了测试。首先，您需要安装babel-cli：

npm install --save-dev babel-cli

创建 .babelrc 文件，其中包含以下内容:

{
  "presets": ["react-app"]
}

然后将脚本添加到package.json文件中：

"compile": "NODE_ENV=production babel src --out-dir lib --copy-files",

最后运行:

npm run compile

这将编译来自src目录的所有源代码到lib目录，并简单地复制剩余的文件。不要忘记在package.json中声明主文件（例如："main"="lib/index.js"）。

但是有一个注意点，如果您使用的是无法通过babel进行编译的文件（如css或字体），那么您的库的用户需要设置适当的（webpack）加载器。

- madox2

---

对于当前的 react-scripts@2.1.3（使用 Babel 7），请安装 @babel/cli 和 @babel/preset-react，而不是 babel-cli。 - jmarceli

如果你在使用 Windows 系统，为了让上述编译命令生效，你需要安装 cross-env：npm install --save-dev cross-env，然后将以下代码加入到 package.json 文件的 scripts 中："compile": "cross-env NODE_ENV=production babel src --out-dir lib --copy-files"。请注意，这不会改变原有命令的含义，只是使其更易于在 Windows 上运行。 - MDahlke

在这种情况下，是直接使用 Babel 创建一个项目会更容易，还是仍然需要使用 create-react-app 来为您完成更多工作？ - user210757

我遇到了错误模块解析失败：意外的标记（32:4） 您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理此文件。请参阅https://webpack.js.org/concepts#loaders - zidniryi

Answer 2

请在 package.json 中编辑以下内容：

1. name（名称）
2. description（描述）
3. scripts（脚本）
4. author（作者）
5. license（许可证）
6. gitRepository（Git 仓库）

然后执行 npm publish 命令，它将会在 npm 上发布你的库。

- Pranesh Ravi

---

谢谢，我已经编辑了问题，我需要知道如何生成单独的js文件，而不是一个大文件。 - Ido Ran

Answer 3

这是我迄今为止发现的最好的内容，使用create-react-app库https://github.com/Rubbby/create-react-library

- Julius Koronci

Answer 4

也许你可以通过js-library-boilerplate引导你的项目。 我已经使用它多次了，它足够好，值得一试。它可以作为vanila js库或react库的基础（在底层使用CRA）。

要使用它，你只需要：

• 克隆仓库

• 进行一些修改，如：

  ---

• 编辑LICENSE文件

• 编辑package.json信息（这将用于生成您构建的文件的标题）
• 在./config/webpack.config.js中编辑库："MyLibrary"，并将其设置为您的库的导出名称
• 编辑./bin/postinstall（如果您想在软件包安装时显示消息）

  ---

...然后你就可以开始了。 同时所有的配置都是开放的，所以你可以根据需要进行调整。 祝你好运！

- Bender