.env 环境变量使用，React项目中使用 .env.*等文件使用

news2024/10/6 22:24:39

一、公共.env环境变量

二、.env.*环境变量(例如：.env.test 环境变量)

公共 .env 环境变量

在项目开发中，我们不可避免的会需要使用 .env 环境变量，例如在定义接口 api 的 baseURL 时，会根据不同的环境，配置不同的根地址 baseURL。

class ApiBaseUrl {
    static getApiBaseURL = () => {
        switch (process.env.NODE_ENV) {
            case 'development':
                return 'http://192.168.0.216:9000'
            default:
                return 'https://mock.apifox.cn/m2/2775158-0-default';
        }
    }
}

使用 create-react-app 命令创建的 react 项目，在使用 yarn run eject 命令将所有内建的配置暴露出来后，在 package.json 文件中，提供了一个 start 命令，和一个 build 命令，这两个命令在

"scripts": {
    "start": "cross-env PORT=5432 node scripts/start.js",
    "build": "cross-env node scripts/build.js",
    "test": "node scripts/test.js"
  },

根据命令，可以在根目录的 scripts 文件夹下，找到 start.js、build.js 两个文件，打开文件可以看到

start.js 文件
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
...
// Ensure environment variables are read.
require('../config/env');
...

build.js 文件
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
...
// Ensure environment variables are read.
require('../config/env');
...

在这两个文件中会读取 .env 文件。
在根目录，/config/env.js 文件中的 getClientEnvironment 方法，会将 REACT_APP 开头的环境变量写入。

因此可以在根目录下创建一个 .env 文件，写一些自定义的公共环境变量（在变量名前加了 “REACT_APP_” 前缀，这是因为 React 会自动将以 “REACT_APP_” 开头的变量添加到 “process.env” 对象中）。

/config/env.js 文件

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
        // We support configuring the sockjs pathname during development.
        // These settings let a developer run multiple simultaneous projects.
        // They are used as the connection `hostname`, `pathname` and `port`
        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
        // and `sockPort` options in webpack-dev-server.
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
        // Whether or not react-refresh is enabled.
        // It is defined here so it is available in the webpackHotDevClient.
        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
      }
    );
  // Stringify all values so we can feed into webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return { raw, stringified };
}

由于 create-react-app 只提供了 production、development 两种环境，如果想再加一个 test 环境，就需要手动设置了，或是在package.json 文件的命令中加。

下面提供了一种方式，将项目的环境变量与命令绑定，通过跑不通的命令来控制环境变量

.env.* 环境变量

dotenv、dotenv-cli

安装命令

$ npm install -D dotenv-cli

或

$ yarn add dotenv-cli --dev

使用方法

这里以.env.test 为例

在项目根目录创建 .env.test 文件
在 .env.test 文件中写入内容

# .env.test

REACT_APP_ENV = 'test'

在 package.json 文件中加一行命令

"start:test": "cross-env PORT=4321 dotenv -e .env.test node scripts/start.js",

在代码中使用，查看是否生效

class ApiBaseUrl {
    static getApiBaseURL = () => {
    	console.log('process.env.REACT_APP_ENV:',process.env.REACT_APP_ENV)
        switch (process.env.REACT_APP_ENV) {
            case 'development':
                return 'http://192.168.0.216:9000'
            case 'test':
                return 'https://mock.apifox.cn/m1/4562135-0-default'
            default:
                return 'https://mock.apifox.cn/m2/2775158-0-default'
        }
    }
}

请添加图片描述

需要打包 test 环境，在 package.json 文件中加一行命令

"build:test": "cross-env dotenv -e .env.test node scripts/build.js",

请添加图片描述
打包后在服务器看也能看到 test 的环境变量
（没有服务器，可以本地起一个服务器尝试）

如果还需要别的变量，只需要采用 REACT_APP_(name) 的命名格式，在需要的环境变量文件中创建就可以了。
项目中可以通过 process.env.REACT_APP_(name) 对创建的变量进行访问。

package.json 文件

"scripts": {
    "start:develop": "cross-env PORT=4321 dotenv -e .env.development node scripts/start.js",
    "start:test": "cross-env PORT=4321 dotenv -e .env.test node scripts/start.js",
    "build:test": "cross-env dotenv -e .env.test node scripts/build.js",
    "build": "cross-env node scripts/build.js",
    "test": "node scripts/test.js"
  },