浅谈webpack构建之环境变量

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。

前言

在上一篇文章《浅谈webpack多文件打包》中，我们提到利用命令行参数区分不同的项目进而实现多文件打包。其中获取自定义参数通过process.argv，但是存在的问题就是argv返回的是一个数组，我们在获取参数的时候需要通过下标解析一次，这样有点不方便。这个时候便可以通过环境变量process.env获取

什么是process.env

process.env 属性返回包含用户环境的对象(来自官方文档的解释)

这句话看情况苦涩难度，解释一下，就是它能够返回项目运行所在环境的一些信息，且这些信息可由开发人员配置。我们平时所说的在属性高级设置配置的环境变量，配置的就是这些东西。且不同系统下配置方式还不太一样，我们总不能因为一个项目就去改一次系统配置吧？确实如此

且又不能像命令行参数那样直接硬编码到命令行里，但是我们可以借助一个依赖实现这个功能，这个时候我们就需要引入 cross-env 了

cross-env

什么是cross-env

cross-env是一个可以让开发者在跨平台处理和使用环境变量的npm仓库，即它可以解决我们上述的问题

用官方文档的话讲就是：cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform. Just set it like you would if it's running on a POSIX system, and cross-env will take care of setting it properly.

如何使用

和其他第三方仓库一样，我们在使用cross-env的时候，第一步肯定是先安装啦

npm install --save-dev cross-env

然后我们就可以修改一下构建脚本：

//packjson.json
"scripts": {
    "test": "jest --coverage",
    "serve": "webpack-dev-server",
    "build": "webpack",
    "build:A": "webpack --env.project=A",
    "build:test": "cross-env TEST=123 webpack --env.project=newdocs"
 },

这样我们就可以在项目中获取到在命令定义的环境变量了：

//webpack.config.js
let ENV = process.env.TEST; //取得在命令行定义的123

拓展

通过cross-env设置环境变量的方法看似已经非常方便了，但是在 Vue-Cli 中，Vue-Cli集成了更好的操作方式

通过 .env文件 编写任意环境变量，从而减少命令行的长度，也便于项目的维护。但值得注意的是，我们在 .env文件 中写入的第三方变量，需要以 VUE_APP_ 作为前缀

并且，我们可以拓展出除了development 、production 和 test 以外的其他环境。只需要在命令行指定 model参数 即可：

// packjson.json
vue-cli-service build --mode testEnv

// .env.testEnv文件
NODE_ENV=production
VUE_APP_TITLE=My App 

// webpack.config.js
let ENV = process.env.NODE_ENV; //取得在 .env文件定义的 'production'
let title = process.env.VUE_APP_TITLE; //取得在 .env文件定义的 'My App'

上述这些在日常项目中基本够用，更多用法可以翻阅官方文档：官方文档传送门