基于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(/
/g, ',').replace(/
/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 FilesJavajdk1.8.0_221
Path=C:Windowssystem32;C:Windows;C:WindowsSystem32Wbem;C:WindowsSystem32WindowsPowerShellv1.0;C:WindowsSystem32OpenSSH;C:Program FilesJavajdk1.8.0_221in;C:Program FilesGitcmd;C:Program Files
odejs;D:softapache-maven-3.6.1in;C:UsersadminAppDataLocalMicrosoftWindowsApps;C:UsersadminAppDataRoaming
pm;C:UsersadminAppDataLocalProgramsMicrosoft VS Codein
PATHEXT=.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC
...
查看某个具体的环境变量, set 环境变量名 ，比如 set JAVA_HOME 。会打印如下
C:Usersadmin>set JAVA_HOME
JAVA_HOME=C:Program FilesJavajdk1.8.0_221
临时设置环境变量（重启会失效）
set JAVA_HOME=123
node与系统环境变量
node应用是如何读写当前操作系统的环境变量呢？
每一个node程序，都有一个当前程序的进程对象process。
这个对象里有一个属性env，即可读取当前操作系统的环境变量。
在node环境下，输入 process.env
C:Usersadmin>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