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

Question

Facebook提供了构建反应应用程序的create-react-app 命令.当我们运行时npm run build,我们看到/build文件夹中的输出.

npm run build

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

构建被缩小,文件名包含哈希.您的应用已准备好部署!

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

Answer 1

编辑你的package.json:

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

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'

Answer 3

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

而且,你不应该.这是背后哲学react-create-app的一部分:他们说约会优于配置.

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

1. 在构建过程完成后,编写一个命令,将构建文件夹内容复制到所需的另一个文件夹.例如,您可以尝试使用copyfilesnpm包或类似的东西.

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

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

   相反,它会将所有配置文件和传递依赖项(Webpack,Babel,ESLint等)复制到项目中,以便您可以完全控制它们.除弹出之外的所有命令仍然有效,但它们将指向复制的脚本,以便您可以调整它们.在这一点上,你是独立的.

   但是,重要的是要注意这是一个单向操作.一旦弹出,你就无法回去!您将丢失所有未来的更新.

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

Answer 4

Create-react-app Version 2+答案

对于create-react-app的最新(> v2)版本(以及可能更旧的版本),将以下行添加到package.json,然后重建.

"homepage": "./"

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

Answer 5

支持BUILD_PATH刚刚登陆到v4.0.2。

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

// .env file
BUILD_PATH=foo 

这应该将所有构建文件放入foo文件夹。

Answer 6

Félix的答案是正确的，并得到了Dan Abramov自己的支持。

但是对于那些想要更改输出本身结构（在build文件夹中）的用户，可以在的帮助下运行构建后命令，该命令将在文件中定义postbuild的build脚本之后自动运行package.json。

下面的示例将其从更改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

Answer 7

这是我的解决方案：在根目录中创建 .env，然后将这一行添加到其中。

BUILD_PATH=$npm_package_name-$npm_package_version

构建路径将为“name_of_app”-“version”

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

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

Answer 8

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

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

Answer 9

Windows 的移动命令对我不起作用。因为它不复制“静态”文件夹和子文件夹。所以我能够使用“ROBOCOPY”解决这个问题。

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

Answer 10

根据Ben Carp和Wallace Sidhrée 的回答：

这是我用来将整个构建文件夹复制到 wamp 公用文件夹的方法。

包.json

{
  "name": "[your project name]",
  "homepage": "http://localhost/[your project name]/",
  "version": "0.0.1",
  [...]
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./post_build.ps1",
    [...]
  },
}

post_build.ps1

Copy-Item "./build/*" -Destination "C:/wamp64/www/[your project name]" -Recurse -force

仅当您部署到服务器上的子文件夹时才需要主页行（请参阅另一个问题的答案）。

Answer 11

快速兼容性构建脚本（也适用于 Windows）：

"build": "react-scripts build && rm -rf docs && mv build docs"

Answer 12

使用跨环境是解决方案。

安装跨环境：

npm install cross-env

您应该更新为：

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