使用create-react-app时使用自定义生成输出文件夹

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

npm运行构建

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

最小化构建，文件名包含哈希。您的应用已准备好进行部署！

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

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

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

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

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

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

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

   而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制到您的项目中，以便您完全控制它们。除弹出命令以外的所有命令仍然可以使用，但是它们将指向复制的脚本，因此您可以对其进行调整。在这一点上，您是一个人。

   但是，必须注意这是单向操作。一旦弹出，就无法返回！您放弃所有将来的更新。

因此，如果可能的话，我建议您不要使用自定义文件夹命名。尝试使用默认命名。如果没有选择，请尝试＃1。如果仍然无法满足您的特定用例，并且您真的选择不了，请探索＃2。祝好运！

编辑您的package.json：

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

Create-react-app版本2+答案

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

"homepage": "./"

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

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

如果您在初次发布三年后就遇到这个问题，因为这仍然对您来说是个问题，请考虑支持此提案以支持新的BUILD_PATH环境变量。

https://github.com/facebook/create-react-app/pull/8986

从提案的文档中：

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

如果采用此建议，则意味着为create-react-app定制输出目标变得像更新更新构建脚本一样简单：

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

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

# .env
BUILD_PATH='./dist'

根据Ben Carp和WallaceSidhrée的回答：

这就是将整个构建文件夹复制到wamp公共文件夹的方法。

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

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

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

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

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

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

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"

npm run postbuildNamingScript在powershell中运行会将JS文件移至build/new-folder-name并从指向新位置index.html。

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

npm运行弹出

打开您的scripts / build.js文件，并将其添加到“使用严格”行之后的文件开头

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

打开您的config / paths.js，然后将exports对象中的buildApp属性修改为目标文件夹。（在这里，我提供“ react-app-scss”作为目标文件夹）

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

跑

npm运行构建

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

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

这增加了scripts在节package.json

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

与../docs是要将构建文件夹移至的相对文件夹

您可以在根目录下通过一点技巧来更新配置：

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

用您要在其上构建的文件夹目录替换-您选择的目录-

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

webpack =>

重命名为dist

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