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

Question

我在create-react-app中使用以下环境变量:

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

当我npm start通过读取.env文件运行时它可以工作:

REACT_APP_API_URL=http://localhost:5555

如何设置不同的值,如http://localhost:1234执行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"
  }
}

Answer 1

我想你现在已经开始工作了,但是对于其他找到这个的人来说,你可以在.env"create-react-app"项目的根目录下的文件中设置默认环境变量.

要分离出使用时使用的变量npm start,npm run build你可以再创建两个env文件 - .env.development和.env.production.

npm start将设置REACT_APP_NODE_ENV为development,因此它将自动使用该.env.development文件,并npm run build设置REACT_APP_NODE_ENV为production,因此它将自动使用.env.production.在这些中设置的值将覆盖您的值.env.

如果你与其他人一起工作,并具有特定值到你的机器而已,你可以在覆盖原有的数值.env.development和.env.production-通过将这些值到一个新的文件.env.development.local,并.env.production.local分别.

编辑:我应该指出你设置的环境变量必须以"REACT_APP_"开头,例如."REACT_APP_MY_ENV_VALUE".

编辑2:如果您需要的不仅仅是开发和生产,请使用此评论指定的env-cmd.

Answer 2

你可以这样使用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;

创建React App NODE_ENV会在构建时为您设置"生产",因此您无需担心何时将其设置为生产.

注意:您必须重新启动服务器(例如,npm start再次运行)以检测环境变量更改.

Answer 3

如果您想使用单独的dotenv文件来构建和/或部署到单独的环境（stage，prod），则可以使用env-cmd，如下所示：

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

然后只需相应地更新package.json：

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

然后要构建，只需运行以下shell命令：

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

Answer 4

安装“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 run start:qa

Answer 5

此外，它可以在没有额外依赖的情况下完成：

"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因此文件