vue-cli2 通过命令打包不同的环境
前几天接到一个需求，就是前端打包需要，用不同的命令将不同的配置打包到环境当中。
之前因为自己搞过一段时间的webpack所以……，抬手就是一个百度。
然后把自己的经验分享一下。
首先我们需要两个插件
- yargs 这个包是用来接收命令运行脚本的参数
- yamljs 解析yaml语法的配置文件
npm install yargs yamljs --save-dev
配置脚本命令
我们打开 package.json文件查看我们平时用的build命令，一般情况应该是下面的样子， 为了节省纸张（其实懒）省略了部分。
"scripts": {
"build": "node build/build.js"
}
这里我们添加一个脚本, 具体命令的名称可以自己按照情况自己定义，然后执行node命令时，接收的参数名以及值都可以自己去定义，在接下来的步骤中，我们会在build.js中去拿到它。
"scripts": {
"build": "node build/build.js",
"build_dev": "node build/build.js --e dev"
}
添加配置文件
在目录下创建/ymls/dev.yml
env: develop
host: www.baidu.com
这里说明一下，可以按照需求加入想要的配置，文件名也可以自己定义的。
修改build.js
我们找到根目录下/build/build.js文件
- 读取命名参数
在文件中引入yargs，读取命令中的参数
const argv = require('yargs').argv
- 使用yamljs解析.yml文件
在这里我封装了一个函数，传入配置文件的名称（不带扩展名）
const path = require('path')
const yamlJs = require('yamljs')
const readConf = function(env) {
return env ? yamlJs.load(path.resolve(`ymls/${env}.yml`)) : ''
}
module.exports = readConf
- 然后我们调用上面的函数，来根据命令中传入的参数找到相应的配置文件并解析为相应的配置对象。
const readEnvConf = require('./readEnvConf')
const argv = require('yargs').argv
const envConf = readEnvConf(argv.e)
这里我们已经成功了一半。
我自己庆幸地以为，基本上已经搞定了。接下来就是通过 webpack.definePlugin将配置注入到我们打包的文件中去。
直接去将配置merge进来，代码如下
const conf = {
plugins: [
new webpack.definePlugin({
envConf
})
]
}
// 然后在调用webpack函数的时候将他merge进去
// 我使用了webpack-merge的一个插件，具体使用可以百度一下
按捺不住内心的喜悦，赶紧运行了一下
npm run build_dev
没错，看起来，一切正常。
但是运行是却报错：env找不到了。
这个问题穷自己找了很久，换了不同方式，包括，把之前（原来脚手架中已经有一个definePlugin）与当前合并。任然会报错。
最后我在官网的文档中找到了答案。
image.png
下面是官网为中的示例代码，
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
收到官网的启发，我将配置对象中的每个值使用JSON.stringfy(), 代码如下
const strObj = {}
for(let i in envConfig) {
strObj[i] = JSON.stringify(envConfig[i])
}
// 然后将strObj放入definePlugin中
运行打包后，没有报错，并且我写在dev.yml中的文件是可以访问到的。
最后，谢谢查看！如果有不明白的问题，可以给我留言，我会很乐意和你探讨。
