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

kse8i1jr 于 2022-11-13 发布在 Webpack

关注(0)|答案(6)|浏览(170)

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

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

当我通过阅读.env文件来运行npm start时，它可以工作：

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"
  }
}

webpack

来源：https://stackoverflow.com/questions/42458434/how-to-set-build-env-variables-when-running-create-react-app-build-script

6条答案

按热度按时间

oxosxuxt1#

我想您现在已经可以使用它了，但是对于发现它的其他人，您可以在“create-react-app”项目根目录下的.env文件中设置默认环境变量。
要将使用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）来覆盖这些值。

**EDIT：**我应该指出，您设置的环境变量必须以“REACT_APP_"开头，例如“REACT_APP_MY_ENV_VALUE”。
**EDIT 2：**如果您需要的不仅仅是开发和生产，请使用env-cmd，正如此注解所指定的那样。

赞(0）回复(0）举报 2022-11-13

4smxwvx52#

您可以像这样使用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设置为“生产”，因此您无需担心何时将其设置为生产。

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

赞(0）回复(0）举报 2022-11-13

dffbzjpn3#

如果您希望使用单独的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 ./.stage.env npm run-script build"
  },

然后运行以下shell命令进行构建：

npm run build:stage

赞(0）回复(0）举报 2022-11-13

gcmastyq4#

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

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

赞(0）回复(0）举报 2022-11-13

fhg3lkii5#

安装“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

赞(0）回复(0）举报 2022-11-13

vyu0f0g16#

如果您使用Heroku进行部署，请执行以下操作：