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

IT技术 reactjs create-react-app
2021-03-29 04:04:31

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

npm 运行构建

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

构建被缩小,文件名包括哈希值。您的应用程序已准备好部署!

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

6个回答

编辑你的 package.json:

"build": "react-scripts build && mv build webapp"
如果您不想移动构建文件夹,只需复制其文件即可。等效于 Windows 的命令:mv build webapp = xcopy /E /H /C /I build webapp
2021-05-24 04:04:31
"build": "react-scripts build && rm -rf docs && mv build docs"在第一次运行后,我不得不这样做,否则它会将构建移动docs 文件夹中,而不是覆盖它。
2021-05-26 04:04:31
为了让跨平台(包括Windows)上运行,首先安装NPM包叫做交叉ENV使用npm i --save-dev cross-env然后,在你的 package.json 中:"build": "cross-env react-scripts build && mv build webapp"
2021-05-29 04:04:31
等效于 Windowsrm -rf webapp = DEL /S /Q webapp的命令mv build webapp = move build webapp
2021-06-16 04:04:31
如果你想在 webapp 上构建内部的东西而不是 webapp/build,Windows 的命令是 "build": "react-scripts build && RMDIR /S /Q webapp && move build webapp"
2021-06-21 04:04:31

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

这个解决方案很棒! 重要警告在编写 BUILD_PATH 时,请确保您编写的路径不存在或者您不介意被删除。这样BUILD_PATH='..'做对我在项目上取得的进展造成了严重损害。(它也删除了 git。)
2021-05-25 04:04:31
这个配置今天发布了 4.0.2 版,它在高级配置文档和变更日志中。
2021-06-09 04:04:31
我希望它进来!他们拒绝支持它真是太烦人了。
2021-06-15 04:04:31

Create-react-app 版本 2+ 答案

对于 create-react-app 的最新 (> v2) 版本(也可能是旧版本),将以下行添加到您的 package.json,然后重建。

"homepage": "./"

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

这正是我正在寻找的。谢谢
2021-05-22 04:04:31
谢谢。这应该是公认的答案。如果您不使用绝对 URL,VS Code 会警告您,但构建也适用于相对 URL。
2021-06-02 04:04:31

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

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

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

  1. 构建过程完成后,立即编写一个命令,将构建文件夹的内容复制到您想要的另一个文件夹中例如,您可以尝试使用copyfilesnpm package或任何类似的东西。

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

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

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

    但是,需要注意的是,这是一种单向操作。一旦弹出,就不能回去你失去了所有未来的更新。

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

这已登陆版本v4.0.2工作示例:stackoverflow.com/a/66036117/6774916
2021-06-01 04:04:31
我主要担心的是,如果任何其他react-create-app命令使用该/build文件夹进行输入,可能会导致麻烦(例如:在部署过程中)。所以复制是我看到的最安全的选择。PS:如果没有计划使用默认/build文件夹进行输入,我同意你的看法 - 只是重命名它会做同样的事情。
2021-06-09 04:04:31
“约定优于配置”并不意味着不灵活。
2021-06-12 04:04:31
复制文件比重命名文件夹有什么优势?
2021-06-14 04:04:31
约定优于配置的问题在于您是否有多个冲突约定。IE 我们在 Angular 应用程序中使用 react。所以只有最终的构建应该进入构建和反应只创建中间文件。
2021-06-21 04:04:31

支持BUILD_PATH刚刚登陆到v4.0.2

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

// .env file
BUILD_PATH=foo 

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

杰出的。使用 BUILD_PATH=../dist 按预期工作
2021-06-15 04:04:31