步骤一:运行跨平台设置和使用环境变量的脚本
windows不支持NODE_ENV=development的设置方式
当您使用NODE_ENV =production, 来设置环境变量时,大多数Windows命令提示将会阻塞(报错)。 (异常是Windows上的Bash,它使用本机Bash。)同样,Windows和POSIX命令如何使用环境变量也有区别。 使用POSIX,您可以使用:$ ENV_VAR和使用%ENV_VAR%的Windows
解决
cross-env使得您可以使用单个命令,而不必担心为平台正确设置或使用环境变量。 只要在POSIX系统上运行就可以设置好,而cross-env将会正确地设置它。
说人话: 这个迷你的包(cross-env)能够提供一个设置环境变量的scripts,让你能够以unix方式设置环境变量,然后在windows上也能兼容运行。
安装
npm install --save-dev cross-env
使用
"script":{
"dev.simple": "cross-env NODE_ENV=simple webpack-dev-server --open --
config ./webpack.config.dev.js --color"
}
获取环境变量值
console.log(process.env.NODE_ENV); // 'simple'
步骤二:借助 webpack.definePlugin,打包的时候把环境变量注入到代码中
process 是在 Node 环境的一个全局(Global)对象,对于前端代码是没有 process 这个对象的。在「构建进程」中的挂在 `env` 上的的变量,自然在「最终在浏览器中执行的前端代码」中不能用。`DefinePlugin` 允许创建一个在「构建时」可以配置的全局常量,并最终注入到「构建后的前端代码」中,其实就是弄个「假」的 `process.env.NODE_ENV` 给在浏览器中执行的前端代码用
使用
plugins: [
new webpack.DefinePlugin({
IS_DEV: JSON.stringify(true),
combine: JSON.stringify(process.env.NODE_ENV)
})
]
最后
代码中可直接取到 IS_DEV 和 combine 的值