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

Question

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

npm 运行构建

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

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

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

score 129 · Accepted Answer

129

编辑你的 package.json：

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

于 2017-06-14T07:58:01.120 回答

score 90 · Accepted Answer

随着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将被毫不留情地清除。仔细检查您的环境变量是否正确指定，尤其是在使用持续集成时。

score 69 · Accepted Answer

Create-react-app 版本 2+ 答案

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

"homepage": "./"

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

score 53 · Accepted Answer

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

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

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

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

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

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

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

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

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

score 30 · Accepted Answer

支持BUILD_PATH刚刚登陆v4.0.2。

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

// .env file
BUILD_PATH=foo

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

score 15 · Accepted Answer

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

但是对于那些想要改变输出本身的结构（在build文件夹内）的人，可以在的帮助下运行构建后命令，它会在文件中定义的脚本postbuild之后自动运行。buildpackage.json

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

包.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

score 9 · Accepted Answer

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

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

score 5 · Accepted Answer

根据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

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

score 4 · Accepted Answer

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

BUILD_PATH=$npm_package_name-$npm_package_version

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

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

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

score 3 · Accepted Answer

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

将此添加到中的scripts部分package.json

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

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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。

score 2 · Accepted Answer

使用 cross-env 是解决方案。

安装跨环境：

npm install cross-env

您应该更新为：

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

score 0 · Accepted Answer

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

npm 运行弹出

打开您的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 运行构建

注意：不建议运行平台相关脚本

score -1 · Accepted Answer

您可以在根目录下使用一些 hack 更新配置：

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

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

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

score -2 · Accepted Answer

网络包 =>

重命名为build 到 dist

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

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

17 回答 17

Windows Powershell 脚本

Related

Reference