前言

明天来讲一下Webpack配置环境变量，那么环境变量是干啥的。咱们在开发我的项目中都会遇到这种场景，辨别开发环境、生产环境、测试环境，不同场景申请不同的接口Api。这时候我的项目中配置的环境变量就退场啦~，上面来讲一下配置环境变量的形式吧。

配置办法

Set or Export

该形式有个辣手的问题就是windows和mac应用的形式还不同，不同零碎应用启动我的项目还得更改代码，这就有点好受，咱们来看一下。

package.json

windows零碎如下配置

{  "scripts": {    "dev": "set NODE_ENV=dev && node index.js"  }}

mac零碎如下配置

{  "scripts": {    "dev": "export NODE_ENV=dev && node index.js"  }}

成果

webpack.config.js文件

console.log(process.env.NODE_ENV) // dev

该配置形式如果用windows形式配置，用mac电脑启动这样就会有问题，咱们还得手动更改，这样十分的繁琐。

Cross-env

该插件就是解决下面咱们所说的问题（不同零碎应用不同的配置形式），该插件称为 "跨平台环境变量"，就是一套代码兼容两端。上面咱们来案例

装置

npm i cross-env -D

在我的项目下package.json中配置

{  "scripts": {    "dev:serve": "set NODE_ENV=baidu.com && npx webpack-dev-server --config=./config/webpack.config.js",  }}

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.com

然而下面这样还有个问题是，尽管咱们环境变量配置好了，然而只能在webpack.config.js外面应用。咱们来到main.js文件下打印看看呢。

main.js

console.log(process.env.NODE_ENV) // undefined

下面main.js能够分明的看到，打印后果为undefined，这是为什么呢，是因为以后的环境变量，只是在node环境中失效，在浏览器中并没有，所以main.js外面获取到的是undefined。

有坑 - 误区

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.commodule.exports = {    mode: "development"}

main.js

console.log(process.env.NODE_ENV) // development

咦，这次怎么main.js外面环境变量又变成development了，这是因为浏览器环境中NODE_ENV走的是webpack里的mode。

  • webpack-dev-server 默认就是 --mode=development
  • webpack 默认就是 --mode=production
留神这里的坑，防止出错。

回归主题，那么既然cross-env环境变量只能在node环境下应用，那怎么在浏览器环境下应用呢。配合Webpack提供的内置插件全局变量，咱们来配置一下。

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.comconst webpack = require("webpack")module.exports = {    mode: "development",    plugins: [        new webpack.DefinePlugin({            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)        })    ]}

main.js

console.log(process.env.NODE_ENV) // baidu.com

这时再看，cross-env全局变量曾经笼罩掉mode的啦，下面JSON.stringify是避免解析成为一个变量。当初能够在全局我的项目中随便应用环境变量啦~。

我是蛙人，咱们下篇见。

公众号：前端娱乐圈

感激

谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。

我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨

写作不易，「点赞」+「在看」+「转发」 谢谢反对❤

往期好文

《聊聊在Vue我的项目中应用Decorator装璜器》

《分享15个Webpack实用的插件！！！》

《手把手教你写一个Vue组件公布到npm且可外链引入应用》

《分享12个Webpack中罕用的Loader》

《聊聊什么是CommonJs和Es Module及它们的区别》

《这些工作中用到的JavaScript小技巧你都晓得吗？》

《【倡议珍藏】分享一些工作中罕用的Git命令及非凡问题场景怎么解决》