基于webpack项目的全局变量

基于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
    })
  ]
};

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

这里是利用了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程序不能设置环境变量，只能读取

注入环境变量并编译

通过编辑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
看看编译后的代码
```javascript
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"
  }

参考：
https://www.cnblogs.com/tugenhua0707/p/9780621.html
https://segmentfault.com/q/1010000009324489