vue-cli2 通過(guò)命令打包不同的環(huán)境
前幾天接到一個(gè)需求，就是前端打包需要，用不同的命令將不同的配置打包到環(huán)境當(dāng)中。
之前因?yàn)樽约焊氵^(guò)一段時(shí)間的webpack所以……，抬手就是一個(gè)百度。
然后把自己的經(jīng)驗(yàn)分享一下。
首先我們需要兩個(gè)插件
- yargs 這個(gè)包是用來(lái)接收命令運(yùn)行腳本的參數(shù)
- yamljs 解析yaml語(yǔ)法的配置文件
npm install yargs yamljs --save-dev
配置腳本命令
我們打開 package.json文件查看我們平時(shí)用的build命令，一般情況應(yīng)該是下面的樣子， 為了節(jié)省紙張（其實(shí)懶）省略了部分。
"scripts": {
"build": "node build/build.js"
}
這里我們添加一個(gè)腳本, 具體命令的名稱可以自己按照情況自己定義，然后執(zhí)行node命令時(shí)，接收的參數(shù)名以及值都可以自己去定義，在接下來(lái)的步驟中，我們會(huì)在build.js中去拿到它。
"scripts": {
"build": "node build/build.js",
"build_dev": "node build/build.js --e dev"
}
添加配置文件
在目錄下創(chuàng)建/ymls/dev.yml
env: develop
host: www.baidu.com
這里說(shuō)明一下，可以按照需求加入想要的配置，文件名也可以自己定義的。
修改build.js
我們找到根目錄下/build/build.js文件
- 讀取命名參數(shù)
在文件中引入yargs，讀取命令中的參數(shù)
const argv = require('yargs').argv
- 使用yamljs解析.yml文件
在這里我封裝了一個(gè)函數(shù)，傳入配置文件的名稱（不帶擴(kuò)展名）
const path = require('path')
const yamlJs = require('yamljs')
const readConf = function(env) {
return env ? yamlJs.load(path.resolve(`ymls/${env}.yml`)) : ''
}
module.exports = readConf
- 然后我們調(diào)用上面的函數(shù)，來(lái)根據(jù)命令中傳入的參數(shù)找到相應(yīng)的配置文件并解析為相應(yīng)的配置對(duì)象。
const readEnvConf = require('./readEnvConf')
const argv = require('yargs').argv
const envConf = readEnvConf(argv.e)
這里我們已經(jīng)成功了一半。
我自己慶幸地以為，基本上已經(jīng)搞定了。接下來(lái)就是通過(guò) webpack.definePlugin將配置注入到我們打包的文件中去。
直接去將配置merge進(jìn)來(lái)，代碼如下
const conf = {
plugins: [
new webpack.definePlugin({
envConf
})
]
}
// 然后在調(diào)用webpack函數(shù)的時(shí)候?qū)⑺鹠erge進(jìn)去
// 我使用了webpack-merge的一個(gè)插件，具體使用可以百度一下
按捺不住內(nèi)心的喜悅，趕緊運(yùn)行了一下
npm run build_dev
沒(méi)錯(cuò)，看起來(lái)，一切正常。
但是運(yùn)行是卻報(bào)錯(cuò)：env找不到了。
這個(gè)問(wèn)題窮自己找了很久，換了不同方式，包括，把之前（原來(lái)腳手架中已經(jīng)有一個(gè)definePlugin）與當(dāng)前合并。任然會(huì)報(bào)錯(cuò)。
最后我在官網(wǎng)的文檔中找到了答案。
下面是官網(wǎng)為中的示例代碼，
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
收到官網(wǎng)的啟發(fā)，我將配置對(duì)象中的每個(gè)值使用JSON.stringfy(), 代碼如下
const strObj = {}
for(let i in envConfig) {
strObj[i] = JSON.stringify(envConfig[i])
}
// 然后將strObj放入definePlugin中
運(yùn)行打包后，沒(méi)有報(bào)錯(cuò)，并且我寫在dev.yml中的文件是可以訪問(wèn)到的。
最后，謝謝查看！如果有不明白的問(wèn)題，可以給我留言，我會(huì)很樂(lè)意和你探討。
