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

Question

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

  

npm run build

     

将生产应用程序构建到build文件夹。这是正确的   bundle在生产模式下进行React并优化构建   性能

     

构建被缩小，文件名包含哈希。你的应用   准备好部署了！

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

Answer 1

编辑你的package.json：

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

Answer 2

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

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

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

1. 在构建过程完成后，编写一个命令，将构建文件夹内容复制到您想要的另一个文件夹。例如，您可以try the copyfiles npm package或类似的任何内容。

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

     

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

        

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

   但是，重要的是要注意这是单向操作。弹出后，您无法返回！您将丢失所有未来的更新。

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

Answer 3

对 BUILD_PATH 的支持刚刚登陆 v4.0.2。

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

// .env file
BUILD_PATH=foo 

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

Answer 4

Create-react-app Version 2+答案

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

"homepage": "./"

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

Answer 5

如果在初次发布三年后就遇到这个问题，因为这仍然对您来说是个问题，请考虑支持此提案以支持新的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'

Answer 6

Félix的答案正确无误，并得到Dan Abramov himself的支持。

但是对于那些想要更改输出本身结构的用户（在replacements.get('val')文件夹中），可以在build的帮助下运行构建后命令，该命令会在{ postbuild文件中定义的build脚本。

下面的示例将其从package.json更改为static/，移动文件并更新相关文件（full gist here）上的文件引用：

package.json

user/static/

postbuild.sh

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

Answer 7

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

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

Answer 8

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

BUILD_PATH=$npm_package_name-$npm_package_version

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

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

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

Answer 9

根据Ben Carp和Wallace Sidhré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

仅当您要将其部署到服务器上的子文件夹时才需要主页行（请参见This answer，从另一个问题中了解）。

Answer 10

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

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

Answer 11

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

1. npm run eject
2. config / webpack.config.prod.js - 第61行 - 将路径更改为：__ dirname +＆＃39; ./../--您选择的目录 - ＆＃39;
3. config / paths.js - 第68行 - 更新为resolveApp（＆＃39; ./--您选择的目录 - ＆＃39;）

将 - 您选择的目录 - 替换为您希望在其上构建的文件夹目录

请注意我提供的路径可能有点脏，但您只需修改配置即可。

Answer 12

我遇到了想要重命名文件夹并更改构建输出位置的情况，并在package.json中的以下代码中使用了最新版本
“ build”：“ react-scripts build && mv build ../ my_bundles”，

Answer 13

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”，并从HTML指向新位置。

Answer 14

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

  

npm运行弹出

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

'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运行构建

注意：不建议使用运行平台的脚本

Answer 15

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

将此添加到scripts的{​​{1}}部分

package.json

"build": "react-scripts build && mv build ../docs || move build ../docs", 是您要将构建文件夹移至的相对文件夹

Answer 16

webpack =>

更名为 build to dist

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