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

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

Npm 运行 build

将用于生产的应用程序生成到生成文件夹 捆绑包在生产模式下反应并优化构建以获得最佳效果 表演。

构建被缩小，文件名包含哈希。你的应用程序 已经准备就绪！

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

235197 次浏览
小开
最佳答案

编辑: 支持可配置的 BUILD_PATH刚刚登陆到 v4.0.2。

不能使用当前配置选项更改生成输出文件夹名称。

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

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

  1. 就在构建过程完成后，编写将生成文件夹内容复制到所需的另一个文件夹的命令。例如，你可以 试试 copyfiles npm 软件包，或者任何类似的东西。

  2. 您可以尝试 弹出创建-反应-应用程序并调整配置。

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

相反，它会将所有的配置文件和传递依赖关系(Webpack、 Babel、 ESLint 等)复制到您的项目中，这样您就可以完全控制它们。除弹出之外的所有命令仍然可以工作，但是它们将指向复制的脚本，以便您可以对它们进行调整。现在你只能靠自己了。

然而，重要的是要注意，这是单向行动，一旦你弹射出去，就回不去了! 您失去了所有未来的更新。

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

小开

您可以在根目录下通过一个小小的代码更新配置:

  1. Npm 运行弹出
  2. Config/webpack.config.prod.js-第61行-更改路径到: _ _ dirname +’./. ./——您选择的目录——’
  3. Js-第68行-更新到 ResolveApp (’./——您选择的目录——’)

Place ——您选择的目录——使用您希望其构建所在的文件夹目录

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

小开

编辑你的软件包:

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

费利克斯的回答是正确的，并得到了 Dan Abramov 本人的支持。

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

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

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

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

创建-反应-应用程序版本2 + 答案

对于 create-response-app 的最新版本(> v2)(也可能更旧) ，将以下代码行添加到 package.json，然后重新构建。

"homepage": "./"

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

小开

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指向新位置。

小开

根据 Ben Carp和 华莱士 · 西德雷的答案:

这是我用来复制我的整个构建文件夹到我的 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

只有当您部署到服务器上的子文件夹时才需要主页行(请参阅另一个问题中的 这个答案)。

小开

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

Npm 运行弹出

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

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

enter image description here

打开 Config/paths.js并将导出对象中的 buildApp 属性修改为目标文件夹。(在这里，我提供 < em > ‘ response-app-scss’作为目标文件夹)

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

enter image description here

快跑

Npm 运行 build

注: 不建议运行与平台相关的脚本

小开

Webpack = >

改名为 建造到分离

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

快速兼容性构建脚本(也适用于 Windows) :

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

对于那些仍在寻找同时适用于 Linux 和 Windows 的答案的人:

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

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

是要将生成文件夹移动到的相对文件夹

小开

这是 官方支持:

默认情况下，CreateReact 应用程序将把编译好的资产输出到与 /src相邻的 /build目录中。您可以使用此变量为 CreateReact 应用程序指定输出资产的新路径。应将 BUILD_PATH指定为相对于项目根目录的路径。

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

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

# .env
BUILD_PATH='./dist'

警告 : BUILD_PATH中指定的路径将被无情地抹去。仔细检查您的环境变量指定是否正确，特别是在使用连续集成时。

小开

对 BUILD_PATH的支持刚刚登陆到 V4.0.2。

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

// .env file
BUILD_PATH=foo

将所有生成文件放入 foo文件夹。

小开

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

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

我的解决办法是: 在 root 中创建.env，然后将这一行添加到其中。

BUILD_PATH=$npm_package_name-$npm_package_version

构建路径将是“ name _ of _ app”-“ version”

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

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

使用 cross-env 是解决方案。

安装 cross-env:

npm install cross-env

你应更新至:

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

你有两种可能:

  1. 在 package.json中将脚本项更改为 "build": "react-scripts build && mv build webapp"，其中 webapp是您的目标文件夹;
  2. 在根目录中创建 .env文件，并在其中插入构建目标文件夹的新定义(比如 BUILD_PATH='./data')

提交答案