使用 create-react-app 时使用自定义构建输出文件夹

Question

Facebook 提供了一个 create-react-app 命令 来构建反应应用程序。当我们运行 npm run build 时，我们会在 /build 文件夹中看到输出。

npm 运行构建

将用于生产的应用程序构建到 build 文件夹。它在生产模式下正确捆绑 React 并优化构建以获得最佳性能。

构建被缩小并且文件名包含哈希。您的应用已准备好部署！

我们如何使用自定义文件夹而不是 /build 进行输出？谢谢。

原文由 6324 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑：支持可配置的 BUILD_PATH 刚刚登陆 v4.0.2。请参阅 t_dom93 的回答。

您无法使用当前配置选项更改构建输出文件夹名称。

此外，你不应该。这是 create-react-app 背后理念 的一部分：他们说 约定优于配置。

如果您确实需要重命名文件夹，我会看到两个选项：

1. 在构建过程完成后， 立即编写一个命令，将构建文件夹内容复制到您想要的另一个文件夹。例如，您可以 尝试 copyfiles npm 包 或类似的东西。

2. 您可以尝试 弹出 create-react-app 并调整配置。

如果您对构建工具和配置选择不满意，您可以随时弹出。此命令将从您的项目中删除单个构建依赖项。

相反，它会将所有配置文件和传递依赖项（Webpack、Babel、ESLint 等）直接复制到您的项目中，以便您完全控制它们。除弹出之外的所有命令仍然有效，但它们将指向复制的脚本，以便您可以调整它们。在这一点上，你是你自己的。

但是，重要的是要注意 这是一种单向操作。一旦弹出，就无法返回！你失去了所有未来的更新。

因此， 如果可能，我建议您不要使用自定义文件夹命名。尝试使用默认命名。如果不是一个选项，请尝试#1。如果它仍然不适用于您的特定用例并且您真的没有选择 - 探索＃2。祝你好运！

原文由 Kaloyan Kosev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 react-scripts >= 4.0.2 ， 官方支持：

默认情况下，Create React App 会将编译后的资产输出到 /build 与 /src --- 相邻的目录。您可以使用此变量为 Create React App 指定输出资产的新路径。 BUILD_PATH 应指定为相对于项目根目录的路径。

 // package.json
  "scripts": {
    "build": "BUILD_PATH='./dist' react-scripts build",
    // ...
  },

或将 .env 文件添加到项目的根目录：

 # .env
BUILD_PATH='./dist'

注意： BUILD_PATH 中指定的路径将被毫不留情地清除。仔细检查您的环境变量是否正确指定，尤其是在使用持续集成时。

原文由 Andrew H. 发布，翻译遵循 CC BY-SA 4.0 许可协议