搜索

「Vue进阶」一篇文章，教你学会Vue-CLI 插件开发

鱼头的Web海洋

共 6525字，需浏览 14分钟

 ·

2021-06-24 20:05


1. 什么是 CLI plugin

如果你正在使用Vue框架，那么你肯定知道 VueCLI是什么。 Vue-CLI3，它是Vue.js 开发的标准工具（脚手架），提供项目支架和原型设计。

除了日常构建打包项目， VueCLI3 的一个重要部分是 cli-plugins，插件开发。它可以修改内部webpack配置并将命令注入到vue-cli-service。一个很好的例子是 @vue/cli-plugin-typescript：当你调用它时，它会 tsconfig.json为你的项目添加一个并更改 App.vue类型，整个过程不需要手动执行。

插件非常有用，但有很多不同的情况: Electron构建器，添加 UI库，如 iview或 ElementUI ....如果你想为某个特定的库提供一个插件但却不存在呢？这时候，构建一个属于自己项目的插件就是个不错的选择。

  1. vue ui

在本文中，我们将构建一个 vue-cli-plugin-rx。它允许我们向项目添加 vue-rx库，并在我们的Vue应用程序中获得 RxJS支持。

2. Vue-cli插件目录结构

CLI 插件是一个可以为 @vue/cli项目添加额外特性的 npm 包。它应该始终包含:

  • 一个 Service插件作为其主要导出

  • 可选的包含一个 Generator 和一个 Prompts 文件。

  1. .
  2. ├── README.md
  3. ├── generator.js  # generator (可选)
  4. ├── prompts.js    # prompt 文件 (可选)
  5. ├── index.js      # service 插件
  6. └── package.json

如果你需要在插件安装的同时，通过命令行来选择是否创建一些示例组件，那么目录可以改为：

  1. .
  2. ├── README.md
  3. ├── generator
  4. │   └── index.js  # generator
  5. ├── prompts.js    # 命令行提示安装
  6. ├── index.js      # service 插件
  7. └── package.json

2.1 GeneratorAPI

一个发布为 npm 包的 CLI 插件可以包含一个 generator.js 或 generator/index.js 文件。插件内的 generator 将会在两种场景下被调用：

  • 在一个项目的初始化创建过程中，如果 CLI 插件作为项目创建 preset 的一部分被安装。

  • 插件在项目创建好之后通过 vue invoke 独立调用时被安装。

GeneratorAPI允许一个 generator 向 package.json 注入额外的依赖或字段，并向项目中添加文件。

2.2 Service 插件

Service插件接收两个参数的函数：一个 PluginAPI实例和一个包含项目本地选项的对象。它可以扩展/修改不同环境的内部 webpack配置，并为其注入其他命令 vue-cli-service。

但在这里，我们只想在必要时添加一些依赖项和示例组件。所以我们的 index.js长这样：

  1. module.exports = (api, opts) => {}

如果你想改变内部 webpack配置或其它操作，请在官方Vue CLI文档中阅读本节

2.3 Package.json

直接通过 npm init初始化

keywords 指定了在库中搜索时能够被哪些关键字搜索到，所以一般这个会多写一些项目相关的词在这里，是一个字符串的数组。

  1. {
  2.   "name": "vue-cli-plugin-rx",
  3.   "version": "1.0.0"，
  4.   "description": "",
  5.   "main": "index.js",
  6.   "keywords": [
  7.     "vue",
  8.     "vue-cli",
  9.     "rxjs",
  10.     "vue-rx"
  11.   ],
  12.   "author": "",
  13.   "license": "ISC"
  14. }

3. 通过generator添加依赖项

generator可帮助我们添加依赖项并更改项目文件。所以，我们需要的第一步是让我们的插件添加两个依赖项： rxjs和 vue-rx：

  1. // generator/index.js
  2. module.exports = (api, options, rootOptions) => {
  3.   api.extendPackage({
  4.     dependencies: {
  5.       'rxjs': '^6.3.3',
  6.       'vue-rx': '^6.1.0',
  7.     },
  8.   });
  9. }

generator 导出一个接收三个参数的函数： GeneratorAPI实例，生成器选项和 - 如果用户使用某个预设创建项目 - 整个预设将作为第三个参数传递。

api.extendPackage方法将会修改项目的 package.json。

在本文的例子中，我们将两个依赖项添加到 dependencies。

现在我们需要更改 main.js文件。为了使 RxJS能在Vue组件中工作，我们需要导入 VueRx和调用 Vue.use(VueRx)

  • 首先，我们创建一个想要添加的字符串到主文件：

  1. let rxLines = `\nimport VueRx from 'vue-rx';\n\nVue.use(VueRx);`;

  • 使用 api.onCreateCompletehook。在文件写入磁盘时调用它:

  1. api.onCreateComplete(() => {
  2.     const fs = require('fs');
  3.     const mainPath = api.resolve(''./src/main.js');
  4. };

  • 现在我们修改文件内容:

  1. api.onCreateComplete(() => {
  2.     const fs = require('fs');
  3.     const mainPath = api.resolve('./src/main.js');
  4.     // 获取内容
  5.     let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' });
  6.     const lines = contentMain.split(/\r?\n/g).reverse();
  7.     // 注入import
  8.     const lastImportIndex = lines.findIndex(line => line.match(/^import/));
  9.     lines[lastImportIndex] += rxLines;
  10.     // 修改应用
  11.     contentMain = lines.reverse().join('\n');
  12.     fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' });
  13.   });
  14. };

4. 本地测试cli-plugin

首先我们创建一个简单的Vue-cli项目：

  1. vue create hello-world

cd到项目文件夹并安装我们新创建的插件：

  1. cd hello-world
  2. npm install --save-dev file://Users/hiro/练习/测试/vue-plugin

安装插件后，需要调用它：

  1. vue invoke vue-cli-plugin-rx

现在，你查看 test-app项目的 main.js,将会看到：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import VueRx from 'vue-rx';
  4. Vue.use(VueRx);

同时，查看 package.json将会发现：

  1. "dependencies": {
  2.     "core-js": "^2.6.5",
  3.     "rxjs": "^6.3.3",
  4.     "vue": "^2.6.10",
  5.     "vue-router": "^3.0.3",
  6.     "vue-rx": "^6.1.0",
  7.     "vuex": "^3.0.1"
  8.   }

5. 通过generator创建示例组件

经过上面的验证，插件已有效。此时，我们可以扩展一下它的功能，创建示例组件，方便其他人理解和使用。

5.1 编写示例组件

我们创建的这个示例组件。它应该是位于项目 src/components文件夹中的文件。

于是我们可以在 generator目录下，创建 /template/src/components:

这一个简单的 RxJS驱动的计数器，带有两个按钮

源码如下：

  1. <template>
  2.     <section>
  3.         <h1>Click on 'Count' button to count your clicks</h1>
  4.         <button v-stream:click="count$">Count clicks</button>
  5.         <button @click="clearCounter">Clear counter</button>
  6.         <p>{{result$}}</p>
  7.     </section>
  8. </template>

  10. <script>
  11. import {
  12.   filter,
  13.   bufferWhen,
  14.   debounceTime,
  15.   map,
  16.   startWith,
  17. } from 'rxjs/operators';
  18. export default {
  19.   domStreams: ['count$'],
  20.   subscriptions() {
  21.     return {
  22.       result$: this.count$.pipe(
  23.         filter(event => !!event),
  24.         bufferWhen(() => this.count$.pipe(debounceTime(400))),
  25.         map(clicks => clicks.length),
  26.         startWith(0),
  27.       ),
  28.     };
  29.   },
  30.   methods: {
  31.     clearCounter() {
  32.       this.count$.next(null);
  33.     },
  34.   },
  35. };
  36. </script>

  38. <style>
  39. button {
  40.   padding: 10px;
  41.   font-size: 14px;
  42.   margin-right: 10px;
  43.   border-radius: 4px;
  44.   outline: none;
  45. }
  46. </style>

这里我们不需要关心 RxJS做了什么（反正我也没看懂），引入 就 vans了。

此时我们需要改动 generator/index.js，使它可以识别并写入文件夹。

  1. api.render('./template', {
  2.   ...options,
  3. });

当你调用 api.render('./template')时，generator将会使用 EJS渲染 `./template `中的文件 (相对于 generator`中的文件路径进行解析)

5.2 命令行提示安装

如果用户是个老手，不想拥有示例组件，该怎么办？在插件安装过程中，我们可以向 prompts.js添加提示代码，以供用户在命令行选择：

  1. module.exports = [
  2.   {
  3.     name: `addExample`,
  4.     type: 'confirm',
  5.     message: '是否添加示例组件到项目components目录？',
  6.     default: false,
  7.   },
  8. ];

询问用户是否要将示例组件添加到项目 components目录下。默认是： false。

这时我们需要修改下 generator/index.js:

  1. if (options.addExample) {
  2.     api.render('./template', {
  3.       ...options,
  4.     });
  5. }

此时我们撤回安装，重新运行

  1. yarn add --save-dev file://Users/hiro/练习/测试/vue-plugin

  3. vue invoke vue-cli-plugin-rx

将会看到：

此时你查看项目components目录，将会发现多了示例组件文件

6.如何发布插件

来自官方文档

为了让一个 CLI 插件能够被其它开发者使用，你必须遵循 vue-cli-plugin-<name> 的命名约定将其发布到 npm 上。插件遵循命名约定之后就可以：

  • 被 @vue/cli-service 发现;

  • 被其它开发者搜索到；

  • 通过 vue add 或 vue invoke 安装下来。

你只需要在 package.json中添加描述 description，以及在插件项目根目录下创建 logo.png。

接下来就是注册npmjs.com

  1. 2、设置仓库地址为npm官方仓库地址(国内大部分都使用阿里淘宝镜像，如果没改publish会失败)
  2. npm config set registry https://registry.npmjs.org/

  4. 3、登陆npm,用户名密码邮箱需要全部匹配
  5. npm whoami
  6. npm login
  7. Username: xxxxx
  8. Password:
  9. Email: (this IS public) xxx@gmail.com
  10. Logged in as xxxxx on https://registry.npmjs.org/.

  12. 4、登陆完可以publish了,执行以下命令
  13. cd dist && npm publish && cd ../
  14. 或npm publish dist
  15. 输出以下信息说明发布成功
  16. + ngx-xxx@0.0.1
  17. 这时登录https://www.npmjs.com/可以看到自己发布的项目

完事。

总结

Vue-CLI插件开发，对于很多项目，当你需要引入一些自己以前编写过的组件或功能，却不想复刻一遍main.js和Package.json，学会了这招，开发贼快。当有人问你如何组织项目的组件库时，啧啧...你说你都是安装自己写的插件。


浏览 46
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
Python爬虫：一篇文章教你学会pyquery
Python乱炖
0
Python爬虫：一篇文章教你学会pyquery
Python实用宝典
0
前端开发 =》Vue进阶打怪升级
stormMoonlet
0
手把手教你开发vue组件库
程序源代码
0
积木Sketch插件进阶开发指南
前端名狮
0
一篇文章教你搞懂日志采集利器 Filebeat
开源Linux
0
一篇文章教你实战Docker容器数据卷
凯哥java
0
一篇文章教你搞懂日志采集利器 Filebeat
极客挖掘机
0
一篇文章带你掌握Vue源码及面试策略
前端进阶学习交流
0
一篇文章带你掌握 Vue 原理及面试策略
尼伯特
0
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报