如何使用create-react-app配置创建和运行应用程序的开发版本

Question

npm run build 命令用于创建项目的生产构建。如何创建开发构建？我正在使用 gradle-node-plugin 来构建该项目。该项目具有标准的create-react-app配置。

- Tuomas Toivonen

---

请查看此链接 -> https://github.com/Nargonath/cra-build-watch - Riccardo Manzan

Answer 1

仅使用 create-react-app 并不容易实现这个功能，这里有一个未解决的问题Here ，看起来它不会很快被添加。

但是，您可以使用一个名为 dotenv 的软件包来完成此操作，以下是您应该采取的步骤：

• 安装dotenv (确保添加 save dev)：npm install dotenv-cli --save-dev

• 在 package.json 的脚本部分添加新脚本："build:dev": "dotenv -e .env.development react-scripts build",

• 您可以使用 npm run build:dev 进行开发构建

---

顺便说一句：如果要避免错误地将开发版部署到生产环境（如此处所述），您可以在 package.json 中添加 build:prod 并禁用常规的 build 命令，参见代码：

"build:dev": "dotenv -e .env.development react-scripts build",
"build:prod": "dotenv -e .env.production react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",

请注意，process.env.NODE_ENV仍将是production，但它会加载您的.env.development文件

- Moses Schwartz

---

对我来说起作用了，但令我惊讶的是编译时间并没有明显缩短，所以我又回到了正常状态。 - Mike Willis

多年过去了，我们仍然需要费尽周折才能获得像调试/开发模式构建这样简单的东西，真是让人烦恼！ - Nagarjuna Borra

Answer 2

感谢@Moses的回答。这是对Moses Schwartz发布的答案的扩展。您还可以通过在bash shell中导出环境变量（开发，测试，生产）的值来动态选择环境文件进行构建。然后，您就不必为不同的环境编写不同的构建命令。

您可以在package.json中使用此方法。

"start": "dotenv -e .env react-scripts start",
"build": "dotenv -e .env.${REACT_APP_ENVIRONMENT} react-scripts build",

当你运行 npm start 命令时，它会从 .env 文件中读取环境变量的值，而当你运行 npm run build 命令时，它会从 .env.{REACT_APP_ENVIRONMENT} 文件中读取环境变量的值。

要定义 REACT_APP_ENVIRONMENT，可以执行以下操作：

export REACT_APP_ENVIRONMENT="development" or 
export REACT_APP_ENVIRONMENT="test" or 
export REACT_APP_ENVIRONMENT="production"

希望这有所帮助。这将有助于为多个环境部署React应用程序。

- Harpreet Singh

Answer 3

感谢 @Tx_monster 的评论

github.com/Nargonath/cra-build-watch

一个用于 create-react-app 的脚本，可以将开发构建写入磁盘。

npm install -D cra-build-watch

package.json:
{
  "scripts": {
    "watch": "cra-build-watch"
  }
}

npm run watch

- man

---

很遗憾，cra-build-watch已经2年没有维护了，并且已经无法与CRA4和5兼容。 - SkyNT

就像加拿大税务局本身一样！ - undefined