环境变量的设置
在用webpack
作为打包工具的项目中,环境变量共有三种:
node
运行时的环境变量webpack
配置对象的环境变量js
运行时的环境变量
node
运行时的环境变量
在node
环境中,通过process.env
可以获取node
的全局环境信息
在windows
系统中,可以通过执行以下命令设置:
set NODE_ENV=dev
在linux
系统中,可以通过执行以下命令设置:
export NODE_ENV=dev
所以,我们可以在项目的package.json
中设置:
"scripts": {
"start-win": "set NODE_ENV=dev && node app.js",
"start-unix": "export NODE_ENV=dev && node app.js",
}
但这样肯定不是我们想要的,能不能统一一条命令?
方法是安装cross-env
npm i -D cross-env
再在package.json
中设置
"scripts": {
"start": "cross-env NODE_ENV=dev && node app.js",
}
这时就可以在所有系统中使用同一命令了。
执行命令之后,就可以在node
代码中获取了
console.log(process.env.NODE_ENV) // dev
NODE_ENV
只是笔者随意设置的环境变量名称,你也可以随意设置环境变量名称
webpack
配置对象的环境变量
webpack
配置对象的环境变量是通过webpack
命令行来设置的。
从webpack4
开始,webpack
将webpack
的命令行抽离成一个单独的npm
包:webpack-cli
,所以,如果要使用webpack
命令行传参需要先安装webpack-cli
。
npm i -D webpack-cli
通过webpack
命令行传参的方式,webpack
配置对象必须通过函数的方式导出。
命令行
webpack --env.NODE_ENV=local --env.production --progress
如果设置
env
变量,却没有赋值,--env.production
默认将--env.production
设置为true
*。还有其他可以使用的语法。
webpack.config.js
module.exports = env => {
// Use env.<YOUR VARIABLE> here:
console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
console.log('Production: ', env.production) // true
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
}
js
运行时的环境变量
js
本身没有环境变量一说,只是我们通过webpack
打包时传入到js
中并设置为js
的全局变量。
方法:
使用webpack
自带的插件DefinePlugin
webpack.config.js
module.exports = env => {
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV)
})
]
}
}
./src/index.js
console.log(process.env.NODE_ENV) // lacal