关于webpack:Webpack配置环境变量

在理论我的项目开发中，须要基于多种环境去设置不同的环境变量以便于在构建阶段或是运行阶段去应用，例如常见的通过process.env.NODE_ENV在构建时去判断以后的构建环境是development还是production，例如须要在开发环境、测试环境和生产环境去拜访不同的接口服务器。

为了模仿实在的我的项目，应用webpack搭建了一个最小化的我的项目构造:

├─package.json
├─src
|  └index.jsx
├─public
|   └index.html
├─config
|   └webpack.config.js

Node环境变量

Node环境变量就是指process.env这个属性

process.env 是什么？

它是 Nodejs 应用程序中，process.env 属性，返回蕴含用户环境的对象，所以它不能够在客户端侧代码中应用，也就不能在浏览器环境上应用。

// process.env(官网示例)
{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'nodejscn',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/nodejscn',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/nodejscn',
  LOGNAME: 'nodejscn',
  _: '/usr/local/bin/node'
}

批改Node环境变量

1. 批改 package.json 文件

应用 cross-env依赖包，反对跨平台配置环境变量。

// package.json
{
  ...,
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development AAA=123 webpack serve --config ./config/webpack.config.js",
    "build:test": "cross-env NODE_ENV=test  webpack --config ./config/webpack.config.js",
    "build:pro": "cross-env NODE_ENV=production  webpack --config ./config/webpack.config.js"
  },
  ...
}

通过在package.json脚本中设置变量的形式来注入环境变量，同时cross-env还反对去设置多个环境变量，只须要通过空格辨别，例如在dev脚本中设置的NODE_ENV=development和AAA=123。

这样在执行npm start就可能通过process.env获取到对应的环境变量。

// webpack.config.js
console.log("【process.env】", process.env.AAA);

可能在构建时的终端中打印出

然而在index.jsx中也就是浏览器环境下的文件中打印process.env就会报错

起因就是前文提到的peocess.env是Node环境的属性，浏览器环境不可能获取到。让浏览器环境获取到所需变量咱们后文再说。

2. 通过.env文件注入

间接通过在script脚本中注入环境变量的形式不利于集中管理环境变量，而且在环境变量较多时这种形式也非常不敌对，所以须要一种形式来集中管理这些环境变量。

应用dotenv依赖包可将环境变量从 .env 文件加载到 process.env。

dotenv会默认加载根目录的.env文件去注入环境变量，通过require('dotenv').config()即可实现注入。

//webpack.config.js
dotenv.config();

//.env文件
AAA=123

同样也可能在终端中看到

dotenv多环境配置

在多环境配置时须要通过规定不同环境对应的.env文件，例如当初规定.env.test是测试环境对应的环境变量，.env.production是生产环境，.env是开发环境。而后通过dotenv.config({ path: })去加载对应文件的环境变量。

//webpack.config.js
const PROJECT_PATH = resolve(__dirname, "../");

const dotenvFile = resolve(PROJECT_PATH, `./.env.${process.env.NODE_ENV}`);

// 加载.env*文件  默认加载.env文件
dotenv.config({
  path: fs.existsSync(dotenvFile)
    ? dotenvFile
    : resolve(PROJECT_PATH, `./.env`),
});

console.log("【process.env】", process.env.ENV);

这里process.env.NODE_ENV是为了判断以后的运行环境来去加载对应的.env文件。

// package.json
"scripts": {
  "start": "npm run dev",
  "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js",
  "build:test": "cross-env NODE_ENV=test  webpack --config ./config/webpack.config.js",
  "build:pro": "cross-env NODE_ENV=production  webpack --config ./config/webpack.config.js"
}

//.env.production
ENV=pro

//.env
ENV=dev

执行npm start

执行npm run build:pro

能够看到不同环境的变量的确曾经注入胜利。

浏览器环境变量

浏览器环境下也须要依据不同的环境变量来解决一些逻辑，然而它不能获取到process.env所以不能像注入Node环境变量的形式来实现。浏览器环境变量是基于webpack.DefinePlugin这个插件在我的项目构建时引入的，引入之后能够在前端代码中全局获取到对应的变量。

根底应用形式是将所需的变量按键值对的形式传入DefinePlugin中，须要留神的是变量值须要通过JSON.stringify进行包裹。

module.exports = {
  plugins: [
    new DefinePlugin({
        aaa: JSON.stringify("!!!!")
    })
  ]
}

执行脚本后能够在index.jsx中失去对应的后果

//index.jsx
console.log("【app】", aaa);
const App = () => {
  return <div>app</div>;
};

配置多环境的浏览器变量

浏览器环境中也须要依据我的项目环境来引入不同的变量，之前在Node环境中曾经获取到不同的环境变量，咱们能够建设一个基于此的映射表在我的项目构建时依据拿到的Node环境变量来引入对应的浏览器环境变量。

// webpack.config.js

// 浏览器环境注入的变量
const define = {
  dev: {
    baseURL: "/api/dev",
  },
  test: {
    baseURL: "/api/test",
  },
  pro: {
    baseURL: "/api/pro",
  },
};

module.exports = {
  new DefinePlugin({
    "process.env": Object.keys(define[process.env.ENV]).reduce((env, key) => {
      env[key] = JSON.stringify(define[process.env.ENV][key]);
      return env;
    }, {}),
  }),
}

执行npm start，能够在浏览器控制台看到后果

执行npm run build:pro，在dist目录开启一个服务器，能够在浏览器控制台看到后果

在理论我的项目中依据不同环境切换接口服务器地址的场景中，就能通过这样的形式来获取到不同环境中的接口地址。

在UMI中去配置多环境变量

在平时开发中较常应用umi作为我的项目框架，umi通过环境变量UMI_ENV辨别不同环境来指定不同配置。

具体来说是通过脚本中注入的UMI_ENV=xxx去匹配对应的config.xxx.js配置文件，而后在define属性中去配置须要引入浏览器环境的变量。

具体相干内容能够看官网文档多环境配置，
代码中可用的变量

// webpack.config.js
module.exports = {
  ...,
  "scripts": {
    "start": "cross-env UMI_ENV=dev umi dev",
    "build:test": "cross-env UMI_ENV=test umi build",
    "build:pre": "cross-env UMI_ENV=pre umi build",
    "build:pro": "cross-env UMI_ENV=pro umi build",
  }
  ...,
}

//config.dev.js
import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    'process.env': {
      BASE_API: '/api/dev',
    },
  },
});