乐趣区

关于前端:Webpack配置环境变量-避免踩坑

前言

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

配置办法

Set or Export

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

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.com
module.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.com
const 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 命令及非凡问题场景怎么解决》

退出移动版