当你看过了官方的几个插件之后,慢慢地,其实你也有需求了。
那如何编写一个 Vue CLI 3 的插件呢?
本文代码已经放到 github 上,地址:https://github.com/dailynodej...
我们建一个文件夹,取名 vue-cli-plugin-demo
,创建一个 index.js
module.exports = (api, projectOptions) => {
//...
}
因为我们看遍了 cli-plugin-babel
、cli-plugin-eslint
等,我们发现他们的最外层结构
多是类似的:
多有一个 index.js
:
接受 2
个参数:
- 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。