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

Question

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

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

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

Answer 1

编辑：对可配置 BUILD_PATH 的支持刚刚进入 v4.0.2。参见。

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

此外，你不应该。这是 the philosophy behind create-react-app 的一部分：他们说 Convention over Configuration。

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

构建过程完成后，立即编写一个命令，将构建文件夹内容复制到您想要的另一个文件夹。例如，您可以 try the copyfiles npm package 或任何类似的东西。
您可以尝试 eject create-react-app 并调整配置。

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

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

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

Answer 2

您可以通过一些技巧更新配置，在您的根目录下：

npm 运行弹出
config/webpack.config.prod.js - 第 61 行 - 将路径更改为：__dirname + './../--您选择的目录--'
config/paths.js - 第 68 行 - 更新为 resolveApp('./--你选择的目录--')

将 --your directory of choice-- 替换为您希望其构建的文件夹目录

请注意，我提供的路径可能有点脏，但这就是您修改配置所需要做的全部工作。

Answer 3

编辑您的package.json：

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

Answer 4

Félix 的回答是正确的并且得到了支持，得到 Dan Abramov himself 的支持。

但对于那些想要更改输出本身结构的人（在 build 文件夹中），可以运行 post-build 命令借助 postbuild，在 package.json 文件中定义的 build 脚本之后自动运行s。

下面的示例将其从 static/ 更改为 user/static/，移动文件并更新相关文件 (full gist here) 的文件引用：

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 5

我遇到过想要重命名文件夹并更改构建输出位置的场景，并在 package.json 中使用了最新版本

中的以下代码

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

Answer 6

Create-react-app 版本 2+ 答案

对于最新的 (> v2) 版本的 create-react-app（可能还有更旧的版本），将以下行添加到您的 package.json，然后重建。

"homepage": "./"

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

Answer 7

Windows Powershell 脚本

//package.json
"scripts": {
    "postbuildNamingScript": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./powerShellPostBuildScript.ps1",


// powerShellPostBuildScript.ps1
move build/static/js build/new-folder-name 
(Get-Content build/index.html).replace('static/js', 'new-folder-name') | Set-Content 
build/index.html
"Finished Running BuildScript"

powershell 中的

运行 npm run postbuildNamingScript 会将 JS 文件移动到 build/new-folder-name 并指向 index.html 的新位置。

Answer 8

根据 and 的回答：

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

package.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 9

在您的应用程序源中打开命令提示符。运行命令

npm run eject

打开您的 scripts/build.js 文件并将其添加到文件开头 'use strict' 行

之后

'use strict';
....
process.env.PUBLIC_URL = './' 
// Provide the current path
.....

打开你的 config/paths.js 并修改导出对象中的 buildApp 属性到你的目标文件夹。（这里，我提供 'react-app-scss' 作为目标文件夹）

module.exports = {
.....
appBuild: resolveApp('build/react-app-scss'),
.....
}

运行

npm run build

注意：运行不建议依赖于平台的脚本

Answer 10

webpack =>

重命名为 build to dist

output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },

Answer 11

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

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

Answer 12

对于仍在寻找适用于 Linux 和 Windows 的答案的任何人：

将此添加到 package.json

中的 scripts 部分

"build": "react-scripts build && mv build ../docs || move build ../docs",

其中 ../docs 是您要将构建文件夹移动到的相对文件夹

Answer 13

与react-scripts >= 4.0.2，这是officially supported:

By default, Create React App will output compiled assets to a /build directory adjacent to /src. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project.

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

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

# .env
BUILD_PATH='./dist'

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

Answer 14

对 BUILD_PATH 的支持刚刚进入 v4.0.2。

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

// .env file
BUILD_PATH=foo

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

Answer 15

windows 的移动命令对我不起作用。因为它不复制“静态”文件夹和子文件夹。所以我能够使用 'ROBOCOPY'.

解决这个问题

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

Answer 16

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

BUILD_PATH=$npm_package_name-$npm_package_version

构建路径将为“name_of_app”-“版本”

这些值可以在 package.json

中设置

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

Answer 17

使用 cross-env 是解决方案。

安装跨环境：

npm install cross-env

你应该更新到：

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

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

Use custom build output folder when using create-react-app

reactjs

create-react-app

Windows Powershell 脚本