當(dāng)你看過了官方的幾個插件之后暇仲，慢慢地久妆，其實你也有需求了缩麸。
那如何編寫一個 Vue CLI 3 的插件呢窒升？
本文代碼已經(jīng)放到 github 上缀遍，地址：https://github.com/dailynodejs/vue-cli-plugin-demo
我們建一個文件夾，取名 vue-cli-plugin-demo饱须，創(chuàng)建一個 index.js
module.exports = (api, projectOptions) => {
//...
}
因為我們看遍了 cli-plugin-babel域醇、cli-plugin-eslint 等，我們發(fā)現(xiàn)他們的最外層結(jié)構(gòu)多是類似的：
多有一個 index.js：
接受 2 個參數(shù)：
- api
- options
module.exports = (api, options) => {
// ...
}
里面就是插件的核心部分蓉媳，我們觀察到它們兩個也很類似譬挚，多用到了：
api.chainWebpack(webpackConfig => {
// ...
})
但同時在 eslint 的源碼中，我們看到了：
api.registerCommand('lint', {
}, args => {
// ...
})
我們看項目根目錄的 package.json 有一個命令
"scripts": {
"lint": "vue-cli-service lint"
}
所以看起來：api.registerCommand 就是可以注冊命令的酪呻。
大家還記得我們還有其他之前介紹過的命令嗎：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
我們看一下它們是不是也是這樣注冊的：
在 @vue/cli-service/lib/commands/build/ 中
module.exports = (api, options) => {
api.registerCommand('build', {
}, async (args) => {
})
}
在 cli-service/lib/commands/serve.js 中
module.exports = (api, options) => {
api.registerCommand('serve', {
}, async function serve (args) {
})
}
那我們的 demo 也注冊一個命令：
module.exports = (api, projectOptions) => {
api.registerCommand('demo', {
description: 'demo plugin for vue cli 3',
usage: 'vue-cli-service demo',
options: {}
}, (args) => {
let options = projectOptions.pluginOptions.demoOptions
console.log('options', options)
})
}
這里要提到 vue.config.js 里面的一個配置項了 pluginOptions
它可以用來給第三方插件傳遞配置
所以我們正好可以通過它進行一些配置：
module.exports = {
pluginOptions: {
demoOptions: {
c: 1,
d: 2
}
}
}
然后在插件里面獲取的方式就是上面的代碼中：
let options = projectOptions.pluginOptions.demoOptions
