Webpack构建命令行参数

发表于 | 分类于 |

一般来说我们会根据不同的环境下构建不同环境的产品，用的比较多的也就是 process.env.NODE_ENV 了。但是如果我们的不同环境不仅仅是不同阶段呢，比如说不同的客户呢。

思路

可能大家首先想到的是不同的配置，的确，不同的配置可以解决这个问题，但是每次构建相应的版本都要修改配置文件，很麻烦，而且容易修改出错。所有这里推荐一种其他的方式————通过命令行参数来控制。

简单的说，就是在构建的时候通过读取命令行参数来判断使用什么样的配置，这样在构建相应版本的时候只需要传入相应的参数即可，免去了频繁修改配置文件的问题，如：

1
npm run build --company=baidu

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
// 读取命令行参数
const argvs = JSON.parse(process.env.npm_config_argv)
// 解析参数，argvs.original 是除npm外的其他字符串以空格分割的数组
// 我们按照我们要的规则取出相应的参数
const index = argvs.original.findIndex(item => item.indexOf('--company') !== -1)
const company = argvs.original[index].split('=')[1]
...
// 将读取的参数注入到环境变量中，由于当前项目为vue，所以直接在 chainWebpack 中增加以下内容
config.plugin('define').tap(args => {
    args[0]['process.env'].company = company
    return args
})
...

然后我们就可以在其他地方使用 process.env.company 来做相应的操作了。

[越努力，越幸运！]