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

开发 前端
今天来讲一下Webpack配置环境变量,那么环境变量是干啥的。我们在开发项目中都会遇到这种场景,区分「开发环境」、「生产环境」、「测试环境」,不同场景请求不同的接口Api。

[[404614]]

前言

今天来讲一下Webpack配置环境变量,那么环境变量是干啥的。我们在开发项目中都会遇到这种场景,区分「开发环境」、「生产环境」、「测试环境」,不同场景请求不同的接口Api。这时候项目中配置的「环境变量」就登场啦~,下面来讲一下配置环境变量的方式吧。

配置方法

Set or Export

该方式有个棘手的问题就是windows和mac使用的方式还不同,不同系统使用启动项目还得更改代码,这就有点难受,我们来看一下。

「package.json」

windows系统如下配置

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

mac系统如下配置

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

「效果」

webpack.config.js文件

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

该配置方式如果用windows方式配置,用mac电脑启动这样就会有问题,我们还得手动更改,这样非常的繁琐。

Cross-env

该插件就是解决上面我们所说的问题(不同系统使用不同的配置方式),该插件称为 "跨平台环境变量",就是一套代码兼容两端。下面我们来案例

「安装」

  1. npm i cross-env -D 

在项目下package.json中配置

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

「webpack.config.js」

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

但是上面这样还有个问题是,虽然我们环境变量配置好了,但是只能在webpack.config.js里面使用。我们来到main.js文件下打印看看呢。

「main.js」

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

上面main.js可以清楚的看到,打印结果为undefined,这是为什么呢,是因为「当前的环境变量」,只是在node环境中生效,在浏览器中并没有,所以main.js里面获取到的是undefined。

「有坑 - 误区」

「webpack.config.js」

  1. console.log(process.env.NODE_ENV) // baidu.com 
  2. module.exports = { 
  3.  mode: "development" 

「main.js」

  1. 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」

  1. console.log(process.env.NODE_ENV) // baidu.com 
  2. const webpack = require("webpack"
  3. module.exports = { 
  4.  mode: "development"
  5.     plugins: [ 
  6.         new webpack.DefinePlugin({ 
  7.             "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) 
  8.         }) 
  9.     ] 

「main.js」

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

这时再看,cross-env全局变量已经覆盖掉mode的啦,上面JSON.stringify是防止解析成为一个变量。现在可以在全局项目中随意使用环境变量啦~。

本文转载自微信公众号「前端娱乐圈」,可以通过以下二维码关注。转载本文请联系前端娱乐圈公众号。

 

责任编辑:姜华 来源: 前端娱乐圈
相关推荐

2010-10-11 09:25:31

MySQL环境变量

2011-12-21 10:46:17

Java

2021-11-29 10:25:16

Linux环境变量命令

2009-07-03 16:46:07

JSP环境变量

2009-06-16 15:57:53

Java环境变量

2010-09-16 15:33:48

Java环境变量

2011-06-14 09:04:52

Qt 环境变量

2017-05-05 08:12:51

Spark共享变量

2020-12-28 10:50:09

Linux环境变量命令

2010-04-06 12:45:28

CentOS系统

2009-06-29 15:06:23

环境变量配置Java

2010-01-11 17:39:31

Fedora 8配置J

2020-11-23 15:21:12

Linux环境变量

2024-10-09 08:09:11

2017-03-07 19:30:54

Windows 7Windowsjava

2023-04-27 08:35:20

Webpack 4性能优化

2023-11-01 13:40:25

GolangGo

2021-02-15 15:52:27

Linux环境变量命令

2012-09-18 01:22:33

Java环境变量Classpath

2020-08-05 09:48:20

Docker容器工具
点赞
收藏

51CTO技术栈公众号