基于webpack项⽬的全局变量
基于webpack项⽬的全局变量
熟悉vue的同学，肯定知道有.env或env.development类似于这样的配置⽂件来定义app的全局变量。那么这是如何实现的呢？如果我没⽤vue，⽐如我⽤的react或者纯⼿⼯的
webpack项⽬。我怎么去实现这个功能呢？以下详细描述，也是vue⽀持配置⽂件的原理。
如何向应⽤注⼊全局变量？
答案是，通过webpack.DefinePlugin
具体⽤法如下
const webpack = require('webpack');
plugins: [
new webpack.DefinePlugin({
appName:"'测试app'",
version:1.0
})
]
};
index.js
java系统变量设置console.log(appName);
如何像vue那样读取专属配置⽂件呢？
⾸先你需要定义这样的配置⽂件 .env
appName="测试app"
然后定义⼀个解析这样⽂件的⽅法 readEnv.js
const fs = require('fs');
const path = require('path');
// 读取环境变量的⽂件把它转化成对象
let fileName = path.join(__dirname, file);
let data = fs.readFileSync(fileName, { encoding: 'utf8' })
let d = place(/\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_) 开头 */
}
最后使⽤ fig.js
const webpack = require('webpack');
const readEnv = require('./readEnv')
const env = readEnv('./.env');
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\nod 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环境下，输⼊ v
C:\Users\admin>node
Welcome to Node.js v14.15.1.
Type ".help" for more information.
> v
{
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"
核⼼代码如下fig.js
const webpack = require('webpack');
const readEnv = require('./readEnv');
const isDev = v.NODE_ENV==='development';
const injectEnvDate = isDev?readEnv('./.env.development'):readEnv('./.env');
plugins: [
new webpack.DefinePlugin({
...injectEnvDate
})
]
};
⼊⼝程序index.js
console.v.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"
}
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。