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

【问题标题】：How to create and run a development build of an application using create-react-app configuration如何使用 create-react-app 配置创建和运行应用程序的开发版本
【发布时间】：2020-02-19 09:07:40
【问题描述】：

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

【问题讨论】：

看看这个 -> github.com/Nargonath/cra-build-watch

标签： reactjs npm create-react-app

【解决方案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 进行开发构建

PS：如果您想避免错误地将开发版本部署到生产环境（如 here 所述），您可以将 build:prod 添加到 package.json 并禁用常规的 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 文件

【讨论】：

为我工作，不幸的是（令我惊讶的是），构建时间并没有明显不同，所以我恢复正常

【解决方案2】：

谢谢，@摩西。这是对摩西施瓦茨发布的答案的扩展。您还可以通过在 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 应用程序。

【讨论】：