在使用create-react-app时，如何使用自定义构建输出文件夹？

Question

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

npm run build

将应用程序构建为生产模式并放置于构建文件夹中。它以生产模式正确地捆绑了React，并优化了构建以获得最佳性能。

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

我们如何使用自定义文件夹代替/build作为输出？谢谢。

- 6324

---

看这个问题，试着将 'build' 改成 'whatever'。我还没有尝试过。 - nikrb

现在官方已经支持了，向下滚动到 https://dev59.com/v1gR5IYBdhLWcg3wT7tL#62378644。 - mb21

Answer 1

从 react-scripts >= 4.0.2 版本开始，这个功能被官方支持了：官方文档

Create React App 默认会将编译的文件输出到与 /src 相邻的 /build 目录下。你可以使用这个变量来指定 Create React App 输出的目标路径。要相对于项目根目录指定 BUILD_PATH。

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

或者在您项目的根目录中添加一个 .env 文件：

# .env
BUILD_PATH='./dist'

注意：在BUILD_PATH中指定的路径将被无情清除。请仔细检查您的环境变量是否正确指定，特别是在使用持续集成时。

- Andrew H.

---

希望它能成功！他们拒绝支持这件事实在太令人恼火了。 - Will Farley

这个配置今天发布了4.0.2版本，详细信息请查看高级配置文档和更新日志。 - Ahmed Mohamedeen

这个解决方案非常棒！重要警告：在编写BUILD_PATH时，请确保您编写的路径不存在或您不介意被删除。执行BUILD_PATH ='..'会对我在项目上所做的工作造成严重破坏（包括删除git）。 - barshopen

对于 Windows 系统，您需要使用 set 命令。例如： "build": "set BUILD_PATH=../wwwroot/clientapp && react-scripts build" - Dan

“'BUILD_PATH'未被识别为内部或外部命令”， - user2301515

Answer 2

编辑你的 package.json 文件：

"build": "react-scripts build && mv build webapp"

- Félix

---

我需要将代码中的 "build": "react-scripts build && rm -rf docs && mv build docs" 进行翻译。这段代码的意思是，在运行React应用时，需要先执行构建命令 react-scripts build，然后删除名为 docs 的文件夹（如果存在），最后将构建好的文件移动到名为 docs 的文件夹中。这样做是为了确保构建的文件能够正确地被覆盖而不是被添加到已有的文件夹中。 - TimoSolo

Windows中与"rm -rf webapp"等价的命令是 "DEL /S /Q webapp"，与"mv build webapp"等价的命令是 "move build webapp"。请注意，这些命令的含义不变，只有语法略有不同。 - Taha Farooqui

如果你不想移动构建文件夹，只需复制它的文件。在Windows中对应的命令是:mv build webapp = xcopy /E /H /C /I build webapp。 - Taha Farooqui

如果你想将东西放在webapp内而不是webapp/build中，Windows的命令是"build": "react-scripts build && RMDIR /S /Q webapp && move build webapp"。 - Sergio Gutiérrez

为了使其跨平台运行（包括Windows），首先使用npm i --save-dev cross-env安装一个名为cross-env的npm包。然后，在您的package.json文件中添加以下代码："build": "cross-env react-scripts build && mv build webapp" - Nikhil Sinha

Answer 3

创建React应用程序2+版本的解决方案

对于最近（> v2）的create-react-app版本（以及可能较旧的版本），请将以下行添加到您的package.json，然后重新构建。

"homepage": "./"

现在您应该看到build/index.html将具有相对链接./static/...，而不是指向服务器根目录的链接:/static/...

- Malcolm Dwyer

---

谢谢。这应该是被接受的答案。VS Code将警告您如果您没有使用绝对URL，但是使用相对URL建立也可以工作。 - Hari

Answer 4

编辑：可配置的BUILD_PATH支持已经在v4.0.2中实现。请参见t_dom93的答案。

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

此外，您也不应该这样做。这是create-react-app哲学的一部分：他们说约定优于配置。

如果您真的需要重命名文件夹，我看到了两个选择：

1. 在构建过程完成后，编写一个复制构建文件夹内容到您想要的另一个文件夹的命令。例如，您可以尝试使用copyfilesnpm软件包或类似的软件包。

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

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

相反，它将把所有配置文件和传递依赖项（Webpack、Babel、ESLint等）直接复制到您的项目中，因此您可以完全控制它们。除弹出以外的所有命令仍将起作用，但它们将指向复制的脚本，以便您可以进行微调。此时，您将独自操作。

但是，请注意：这是单向操作。一旦您弹出，就无法回退！您将失去所有未来的更新。

因此，如果可能的话，我建议您不要使用自定义文件夹命名。尽量使用默认命名方式。如果不能使用默认命名，尝试使用#1。如果在特定情况下仍然无法使用，且已经没有其他选项 - 尝试探索#2。祝你好运！

- Kaloyan Kosev

---

复制文件与重命名文件夹相比有哪些优势？ - azium

约定优于配置的问题在于如果有多个冲突的约定。例如，我们在 Angular 应用程序中使用 React。因此，只有最终构建应该进入构建文件夹，而 React 只会创建中间文件。 - paul23

这已经在版本v4.0.2中发布。工作示例：https://dev59.com/v1gR5IYBdhLWcg3wT7tL#66036117 - t_dom93

“约定优于配置”并不意味着不灵活。 - Reactgular

他们发现“约定优于配置”并不够好，并在 v4.0.2 上实施了它。 - Coal

Answer 5

刚刚在v4.0.2版本中加入了对BUILD_PATH的支持。

将BUILD_PATH变量添加到.env文件中，并运行build脚本命令：

// .env file
BUILD_PATH=foo 

这将把所有构建文件放入foo文件夹中。

- t_dom93

---

太棒了。使用BUILD_PATH=../dist按预期工作。 - Ahack

Answer 6

Félix的回答是正确并且被点赞的，而且是由Dan Abramov本人支持的。

但是对于那些想要改变输出结构本身的人（在build文件夹中），可以使用postbuild运行后续命令，该命令会自动运行在package.json文件中定义的build脚本之后。

下面的示例将其从static/更改为user/static/，移动文件并在相关文件上更新文件引用（完整的依赖项在此处）：

package.json

{
  "name": "your-project",
  "version": "0.0.1",
  [...]
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "./postbuild.sh",
    [...]
  },
}

postbuild.sh

#!/bin/bash

# The purpose of this script is to do things with files generated by
# 'create-react-app' after 'build' is run.
# 1. Move files to a new directory called 'user'
#    The resulting structure is 'build/user/static/<etc>'
# 2. Update reference on generated files from
#    static/<etc>
#     to
#    user/static/<etc>
#
# More details on: https://github.com/facebook/create-react-app/issues/3824

# Browse into './build/' directory
cd build
# Create './user/' directory
echo '1/4 Create "user" directory'
mkdir user
# Find all files, excluding (through 'grep'):
# - '.',
# - the newly created directory './user/'
# - all content for the directory'./static/'
# Move all matches to the directory './user/'
echo '2/4 Move relevant files'
find . | grep -Ev '^.$|^.\/user$|^.\/static\/.+' | xargs -I{} mv -v {} user
# Browse into './user/' directory
cd user
# Find all files within the folder (not subfolders)
# Replace string 'static/' with 'user/static/' on all files that match the 'find'
# ('sed' requires one to create backup files on OSX, so we do that)
echo '3/4 Replace file references'
find . -type f -maxdepth 1 | LC_ALL=C xargs -I{} sed -i.backup -e 's,static/,user/static/,g' {}
# Delete '*.backup' files created in the last process
echo '4/4 Clean up'
find . -name '*.backup' -type f -delete
# Done

- Wallace Sidhrée

---

"postbuild": "postbuild.sh"（不需要./）对我来说管用，至少在Windows系统中。 - x7BiT

可惜你必须要删除 build 文件夹，然后再移动/重命名它。 - Greg K

Answer 7

我有一个场景，想要重命名文件夹并更改构建输出位置，在 package.json 中使用了以下代码，使用的是最新版本。

"build": "react-scripts build && mv build ../my_bundles"

- Jaison James

---

这段代码非常有用，它可以将 build 目录下的内容复制到 docs 目录中，以便在 GitHub Pages 上进行托管。最终选择了以下代码：`"build-docs": "react-scripts build && cp -r build/** docs"` - ipatch

Answer 8

这是我的解决方案： 在根目录下创建.env文件，然后在其中添加此行。

BUILD_PATH=$npm_package_name-$npm_package_version

构建路径将是 "应用名称"-"版本号"

这些值可以在 package.json 中设置。

{
  "name": "my-app",
  "version": "0.1.2",
...
}

- Mahdi Mohammadizadeh

Answer 9

在Windows系统中，移动命令对我来说并不起作用，因为它无法复制“static”文件夹及其子文件夹。因此，我解决了这个问题，使用了'ROBOCOPY'。

"build": "react-scripts build && ROBOCOPY build ../my-relative-path/react-app /E",

- Muhammet Can TONBUL

---

这似乎是Windows用户的最佳选择 - 其他方法对我都不起作用。 - MartinJ

Answer 10

使用 cross-env 是解决方案。

安装 cross-env：

npm install cross-env

您应更新到:

"scripts": {
  "build": "cross-env BUILD_PATH='../yourCustomBuildFolder' react-scripts build",
}

- Ilias

---

我之前遇到了“BUILD_PATH未被识别”的错误，但是根据您的建议操作后，我的问题得到了解决。 - majidshakeelshawl