Webpack配置环境变量 - 避免踩坑

前端Sharing

共 2699字,需浏览 6分钟

 ·

2021-06-15 04:46

前言

今天来讲一下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是防止解析成为一个变量。现在可以在全局项目中随意使用环境变量啦~。

我是蛙人,我们下篇见。

感谢


谢谢你读完本篇文章,有帮助的话请❤️关注+点赞+收藏+评论+转发❤️

如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

  1. 点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
  2. 欢迎加我微信「TH0000666」一起交流学习...
  3. 关注公众号「前端Sharing」,持续为你推送精选好文。



浏览 34
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报