运行 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

如何在执行 npm run build 时设置不同的值，例如 http://localhost:1234？

这是我的 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

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

Create React App 在构建时为您将 NODE_ENV 设置为 'production'，因此您无需担心何时将其设置为生产环境。

注意：您必须重新启动服务器（例如运行 npm start 再次）以检测环境变量更改。

Answer 2

我想你现在已经可以正常工作了，但对于其他发现此问题的人，你可以在 "create-react-app" 项目根目录下的 .env 文件中设置默认环境变量。

要分离出使用 npm start 和 npm run build 时使用的变量，您可以再创建两个环境文件 - .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, as specified by this comment.

Answer 3

如果您想要单独的 dotenv 文件来构建 and/or 部署到单独的环境（阶段、产品），那么您可以像这样使用 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 ./.stage.env npm run-script build"
  },

然后要构建您只需运行这个 shell 命令：

npm run build:stage

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 运行 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 个相应的文件

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

How to set build .env variables when running create-react-app build script?

reactjs

webpack

create-react-app

react-scripts