Facebook 提供了一个create-react-app
命令来构建 React 应用程序。当我们运行时npm run build
,我们会在/build
文件夹中看到输出。
npm 运行构建
将用于生产的应用程序构建到构建文件夹。它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。
构建被缩小,文件名包括哈希值。您的应用程序已准备好部署!
我们如何使用自定义文件夹而不是/build
输出?谢谢。
Facebook 提供了一个create-react-app
命令来构建 React 应用程序。当我们运行时npm run build
,我们会在/build
文件夹中看到输出。
npm 运行构建
将用于生产的应用程序构建到构建文件夹。它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。
构建被缩小,文件名包括哈希值。您的应用程序已准备好部署!
我们如何使用自定义文件夹而不是/build
输出?谢谢。
编辑你的 package.json:
"build": "react-scripts build && mv build webapp"
有了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
将被毫不留情地删除。仔细检查您的环境变量是否正确指定,尤其是在使用持续集成时。
Create-react-app 版本 2+ 答案
对于 create-react-app 的最新 (> v2) 版本(也可能是旧版本),将以下行添加到您的 package.json,然后重建。
"homepage": "./"
您现在应该看到编译/ index.html的将有相对链接./static/...
,而不是链接到服务器的根目录:/static/...
。
您无法使用当前配置选项更改构建输出文件夹名称。
此外,你不应该。这是背后哲学create-react-app
的一部分:他们说约定优于配置。
如果您确实需要重命名文件夹,我会看到两个选项:
构建过程完成后,立即编写一个命令,将构建文件夹的内容复制到您想要的另一个文件夹中。例如,您可以尝试使用copyfiles
npm package或任何类似的东西。
您可以尝试弹出 create-react-app并调整配置。
如果您对构建工具和配置选择不满意,您可以随时弹出。此命令将从您的项目中删除单个构建依赖项。
相反,它会将所有配置文件和可传递依赖项(Webpack、Babel、ESLint 等)复制到您的项目中,以便您可以完全控制它们。除了eject 之外的所有命令仍然有效,但它们将指向复制的脚本,以便您可以调整它们。在这一点上,你是靠自己的。
但是,需要注意的是,这是一种单向操作。一旦弹出,就不能回去!你失去了所有未来的更新。
因此,如果可能,我建议您不要使用自定义文件夹命名。尝试坚持使用默认命名。如果不是一个选项,请尝试 #1。如果它仍然不适用于您的特定用例,并且您真的别无选择 - 探索 #2。祝你好运!
支持BUILD_PATH
刚刚登陆到v4.0.2。
将BUILD_PATH
变量添加到.env
文件并运行build
脚本命令:
// .env file
BUILD_PATH=foo
这应该将所有构建文件放入foo
文件夹。