熟悉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