本文首发于 vivo 互联网技术 微信公众号
链接：https://mp.weixin.qq.com/s/Rl8XLUX7isjXNUmbw0-wow
作者：ZhuPing

现如今 Vue 作为支流的前端框架之一，其健全的配套工具，沉闷的开源社区，让广发码农热衷追捧。Vue CLI 作为其官网的开发构建工具，目前已更新迭代到 4.x 版本，其外部集成了日常开发用到的打包压缩等性能，简化了惯例本人入手配置 webpack 的懊恼。另外提供的插件性能更是满足了使用者定制化的需要场景，那么本文就来讲下如何去开发一个插件。

假如咱们团队当初须要去开发一套 UI 组件库，因为团队内每个人的编码习惯不一样，可能会呈现繁多组件命名、目录构造等不对立的问题，对于团队对立对外出现的组件库来说，这当然不是一件坏事。那有什么方法能够去束缚团队成员对立格调呢？这里咱们就能够开发一个组件插件来解决这些懊恼，那么咱们来看下如何来开发这个组件插件呢？

一、命名标准

为了让一个 CLI 插件可能被其余开发者应用，官网介绍了必须遵循 vue-cli-plugin-<name> 的命名约定，所以这里咱们命名为 vue-cli-plugin-next-component。

mkdir vue-cli-plugin-next-component && cd $_

对于官网本人的插件，都是以 @vue/cli-plugin-<name> 命名以示区别。

二、目录构造

确定好插件名称后，咱们就要为它填充目录构造了。首先咱们得先确认，这个插件具体要实现哪些性能：

• 通过对话的模式，接管开发者输出的组件信息，包含组件名称，类型，作者等信息
• 获取组件信息，用来渲染内置的 template 组件模板，这样保障所有创立的组件都是对立的构造目录

至此，大抵的构造目录如下：

.
├── README.md
├── generator
│ ├── template
│ └── index.js # generator
├── prompts.js # prompt 文件 (可选)
├── index.js # service 插件
└── package.json

Service 插件

作为其次要导出文件，导出的函数承受两个参数，蕴含 API 和 options，API 容许 Service 插件针对不同的环境扩大 / 批改外部的 webpack 配置，并向 vue-cli-service 注入额定的命令。options 蕴含了 vue.config.js 内指定选项的对象或者是在 package.json 内的 Vue 字段。

module.exports = (api, options) => {
 api.chainWebpack(webpackConfig => {// 通过 webpack-chain 批改 webpack 配置})
 
 api.configureWebpack(webpackConfig => {
 // 批改 webpack 配置
 // 或返回通过 webpack-merge 合并的配置对象
 })
 
 api.registerCommand('test', args => {// 注册 `vue-cli-service test`})
}

Prompt 

作为对话文件，在插件被初始化的时候会被调用，底层应用了 inquire 模块，最终返回一个用于 inquire 的问题的数组，被解析的答案会作为选项被传递给插件的 Generator，这里咱们能够减少一些组件相干的问题，同时也能够对输出的内容做校验。

module.exports = [
 {
 name: 'componentName',
 type: 'input',
 message: '请输出要创立的组件名称(kebab-case):',
 validate: function(str) {return /^[a-z][a-z|-]*[a-z]$/.test(str);
 }
 },
 {
 name: 'componentCnName',
 type: 'input',
 message: '请输出要创立的组件中文名称(中文):',
 validate: function(str) {return /[^\x00-\xff]$/.test(str);
 }
 },
 ...
]

Generator 

最终导出一个函数，这个函数接管三个参数，一个是 GeneratorAPI 实例，对于第三方插件来说，options 来自 Prompt 对话内容，如果用户应用某个预设创立我的项目，整个预设将作为第三个参数传递。在调用 render 办法时，该 Generator  将应用 ejs 来渲染 template 模板，所以咱们在写模板时，须要把动静配置的中央，用 ejs 的模板语法去标注。

module.exports = (api, options, rootOptions) => {
 api.render('./template', {...options});
}

模板示例：

<template>
 <div>I am a <%=camelName %> component. Rewrite me from here.</div>
</template>
 
<script>
export default {name: 'nx-<%=componentName %>'};
</script>

三、测试验证

实现插件的开发后，先来本地验证下。先建个目录执行 npm init 后，通过 install 装置写好的插件。

装置好后，通过 vue invoke 指令初始化插件。

最终咱们会看到 test 目录里曾经多了一个 packages 目录，同时上面有个叫 button 的组件子目录，这样就满足咱们预期指标啦，让参加组件开发的同学更加专一的去写代码就行了，不必再关怀目录、命名等标准要求了。

四、小结

对于一些我的项目开发，如果须要常常引入其余工程的一些功能模块或者是业务组件，但又不想每次都是复制粘贴，就能够写个插件来帮你实现，解放双手，一劳永逸。另外，插件也补救了脚手架在定制化方面的有余，让附加性能变得繁多便捷可插拔，使得 Vue CLI 工具可能更加专一在 Vue 我的项目脚手架上，将 Vue 生态中的工具根底更加规范通用化。

附上残缺插件代码，点击查看

更多内容敬请关注 vivo 互联网技术 微信公众号

注：转载文章请先与微信号：Labs2020分割