webpack项目的全局变量

熟悉vue的同学，肯定知道有.env或env.development类似于这样的配置文件来定义app的全局变量。那么这是如何实现的呢？如果我没用vue，比如我用的react或者纯手工的webpack项目。我怎么去实现这个功能呢？以下详细描述，也是vue支持配置文件的原理。

如何向应用注入全局变量？

答案是，通过webpack.DefinePlugin

具体用法如下

webpack.config.js

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      appName:"'测试app'",
      version:1.0
    })
  ]
};

index.js

console.log(appName);

如何像vue那样读取专属配置文件呢？

首先你需要定义这样的配置文件 .env

appName="测试app"

然后定义一个解析这样文件的方法 readEnv.js

const fs = require('fs');
const path = require('path');

// 读取环境变量的文件把它转化成对象
module.exports = (file) => { // flie为文件路径
  let fileName = path.join(__dirname, file);
  let data = fs.readFileSync(fileName, { encoding: 'utf8' })
  let d = data.replace(/\r/g, ',').replace(/\n/g, '') // 把换行和回车替换
  let arr = d.split(',').map(item => {
    return item.split('=')
  }) // [ [ 'a', '1' ], [ 'b', '2' ] ]
  let obj = {}
  arr.forEach(item => {
    obj[item[0]] = item[1]
  })
  return obj //{ a: '1', b: '2' }
  // 可以接着处理
  /* 像vue-cli3 新版create-react-app 一样规定环境变量的Key必须以(VUE_APP_)  (REACT_APP_) 开头 */
}

最后使用 webpack.config.js

const webpack = require('webpack');
const readEnv = require('./readEnv')
const env = readEnv('./.env');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
    ...env
    })
  ]
};

如何根据不同环境，使用不同配置文件呢？

首先我们是可以利用给webapck指定配置文件来达到此目的，

比如：创建webpack.dev.js和webpack.config.js 。然后在script定义如下脚本

"scripts": {
    "dev":"webpack --config webpack.dev.js",
    "build":"webpack"
 }

这样没问题，不过这样会有多个webpack配置文件，另外还有一种办法去做这样的事

利用了node的环境变量，然后webpack读取当前进程中的环境变量（webpack执行起来就是一个node程序进程），根据这个来区分

所以需要先了解下node和环境变量知识

环境变量

环境变量是什么呢？

其实我们可以把它理解为"系统的视线范围"，

没错，配置进入了环境变量的程序，就等于是进入了系统的视线范围，

打开DOS命令窗口后输入程序名，

系统就会把在其视线内的环境变量内的程序找出来，

如果程序没有配置进入环境的变量的话，那系统自然就找不到。

window下查看环境变量：cmd>输入set回车，你就能看到类似于如下的打印，就是系统的环境变量了

JAVA_HOME=C:\Program Files\Java\jdk1.8.0_221
Path=C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Java\jdk1.8.0_221\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;D:\soft\apache-maven-3.6.1\bin;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;C:\Users\admin\AppData\Roaming\npm;C:\Users\admin\AppData\Local\Programs\Microsoft VS Code\bin
PATHEXT=.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC
...

查看某个具体的环境变量, set 环境变量名 ，比如 set JAVA_HOME 。会打印如下

C:\Users\admin>set JAVA_HOME
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_221

临时设置环境变量（重启会失效）

set JAVA_HOME=123

node读取系统环境变量

node应用是如何读写当前操作系统的环境变量呢？

每一个node程序，都有一个当前程序的进程对象process。

这个对象里有一个属性env，即可读取当前操作系统的环境变量。

在node环境下，输入 process.env

C:\Users\admin>node
Welcome to Node.js v14.15.1.
Type ".help" for more information.
> process.env
{
  JAVA_HOME: 'C:\\Program Files\\Java\\jdk1.8.0_221',
  MVN_HOME: 'D:\\soft\\apache-maven-3.6.1',
  OneDrive: 'C:\\Users\\admin\\OneDrive',
  OS: 'Windows_NT',
  Path: 'C:\\Program Files\\Java\\jdk1.8.0_221\\bin;C:\\Program Files\\Git\\cmd;C:\\Program   Files\\nodejs\\;D:\\soft\\apache-maven-3.6.1\\bin;C:\\Users\\admin\\AppData\\Roaming\\npm;
}

在node项目中读取process，比如node-demo.js

console.log(process.env)

web读取process.env

webpack编译后的代码中拿到环境变量

webpack也是一个node项目进程，所以直接可以拿到webpack.config.js是可以直接process.env

然后通过webpack.DefinePlugin注入进来。如下配置webpack.config.js即可

const webpack = require('webpack');
const readEnv = require('./readEnv')
const customEnv = readEnv('./.env');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env:  JSON.stringify({
          ...process.env,
          ...customEnv
        })
      }
    })]
};

如口文件 index.js

// 源代码
console.log('i am index',process.env.appName);

// 编译后的代码
console.log("i am index",'"测试app"');

动态设置环境变量

通过动态设置环境变量，可以根据不同的script，来加载不同的配置文件

通过编辑packge.json的script，我们可以在执行webpack编译前，修改或添加本次webpack编译时（即本次node程序运行时）的环境变量。packge.json脚本如下：

"scripts": {
    "dev": "set NODE_ENV=development && webpack",
    "build": "set NODE_ENV=production && webpack"
 }

新增两个配置文件

.env 和 .env.development。内容分别如下

appName="正式app"

appName="测试app"

核心代码如下webpack.config.js

const webpack = require('webpack');
const readEnv = require('./readEnv');

const isDev = process.env.NODE_ENV==='development';
const injectEnvDate = isDev?readEnv('./.env.development'):readEnv('./.env');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
    ...injectEnvDate
    })
  ]
};

入口程序index.js

console.log(process.env.NODE_ENV+':'+appName);

测试验证

尝试运行编译测试 npm run dev

看看编译后的代码

console.log("development:测试app");

已经生效

兼容性问题

当我们在mac或和linux上执行 npm run build或dev的时候会报错

因为linux上设置环境变量的语法和window不一样

window是 set JAVA_HOME=xxx

linux是JAVA_HOME=xxx

为了抹平这种差异，我们可以引用一个三方包，来处理

yarn add --dev cross-env

然后修改script命令

"scripts": {
    "dev": "cross-env NODE_ENV=develop webpack", //注意这里没有&&
    "build":"cross-env NODE_ENV=production webpack"
  }

命令行可配置操作

进阶一下，可以不用看

如果我想通过命令行 指定配置文件，改怎么做，

方案：可以通过运行node程序，给这个node脚本指定参数，然后再node再去做复杂的逻辑

packge.json脚本如下

 "scripts": {
    "build": "node builder.js ./.env"
  },

builder.js代码如下

const shell = require('shelljs');
const readEnv = require('./readEnv')
const customEnv = readEnv(process.argv.slice(2)[0]);

// 扩充process对象，将自定义的配置注入进去
process.env = {
    ...process.env,
    ...customEnv
}

// 执行webpack
shell.exec('webpack');

webapck.config.js

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      process:{
      	...process.env
      }
    })
  ]
};

参考：

https://www.cnblogs.com/tugenhua0707/p/9780621.html

https://segmentfault.com/q/1010000009324489