在运行 create-response-app 构建脚本时如何设置 build.env 变量？

我在创建反应应用程序中使用了以下环境变量:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

当我通过读取 .env文件来运行 npm start时，它会工作:

REACT_APP_API_URL=http://localhost:5555

How do I set a different value like http://localhost:1234 when executing a npm run build?

这是我的 package.json文件:

{
"name": "webapp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.9.0"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
194611 次浏览
小开
最佳答案

你可以这样使用 process.env.NODE_ENV:

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

你需要设置 REACT_APP_PROD_API_URL和 REACT_APP_DEV_API_URL。

或者，如果生产 URL 总是相同的，你可以简化它:

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

CreateReact 应用程序在构建时将 NODE_ENV设置为“生产”，因此不需要担心何时将其设置为生产。

注意: 你必须重新启动你的服务器(例如再次运行 npm start)来检测环境变量的变化。

小开

我想您现在已经完成了这项工作，但是对于其他找到这项工作的人，您需要在“ create-response-app”项目的根目录下的 .env文件中设置默认环境变量。

To separate out the variables used when using npm start and npm run build you can create two more env files - .env.development and .env.production.

npm start将 REACT_APP_NODE_ENV设置为 development，因此它将自动使用 .env.development文件，而 npm run build将 REACT_APP_NODE_ENV设置为 production，因此它将自动使用 .env.production。其中设置的值将覆盖 .env中的值。

如果您与其他人一起工作，并且只有特定于您的计算机的值，那么您可以通过将这些值分别添加到新文件 .env.development.local和 .env.production.local来覆盖 .env.development和 .env.production中的值。

编辑: 我应该指出，您设置的环境变量必须以“ REACT _ APP _”开始，例如“ REACT _ APP _ MY _ ENV _ VALUE”。

编辑2: 如果您需要的不仅仅是开发和生产，那么使用 Env-cmd，如 此评论所指定的。

小开

如果您希望有单独的 dotenv 文件用于构建和/或部署到单独的环境(stage，prod) ，那么您可以像下面这样使用 Env-cmd:

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

Then just update your package.json accordingly:

  "scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.stage.env npm run-script build"
},

Then to build you'd just run this shell command:

npm run build:stage
小开

安装‘ env-cmd’软件包

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build",
"start:qa": "env-cmd -f .env.qa react-scripts start",
"build:qa": "env-cmd -f .env.qa react-scripts build"
},

在本地如果我们想运行 qa 环境使用 Npm 运行开始: qa

小开

而且，这样做不需要额外的依赖性:

"scripts": {
"build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
"build:staging": "REACT_APP_ENV=staging npm run build",
"build:production": "REACT_APP_ENV=production npm run build"
},

并相应地保存 .env.staging和 .env.production文件

小开

如果您正在使用 Heroku 进行部署，那么请遵循以下步骤:

  • 进入应用程序设置 > > 点击“显示配置变量”按钮
  • 添加变量
  • 在应用程序中使用它们的方式与前面使用 ex. process.env.REACT _ APP _ VARIABLE _ NAME 的方式相同
  • 重新部署应用程序 就是这样。

提交答案