[Vue CLI 3] 插件开发之 registerCommand 到底做了什么

Ververica 发布于2019-08-23 11:41 / 3023人阅读

摘要：首先，我们看到在中有的定义我们看到和其实多是依托的之前我们提到过了通过来注册命令的比如在我们看一下文件函数会设置接受个参数我们再看一下会调用方法里面会从里面取最终执行它里面的

首先，我们看到在 package.json 中有 scripts 的定义：

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}

我们看到 serve 和 build 其实多是依托的 vue-cli-service

之前我们提到过了通过 api.registerCommand 来注册命令的：

比如在 cli-service/lib/commands/serve.js

module.exports = (api, options) => {
  api.registerCommand("serve", {
    // ...
  }, async function serve (args) {
  })
}

我们看一下 cli-service/lib/PluginAPI.js 文件：

class PluginAPI {
  constructor (id, service) {
    this.id = id
    this.service = service
  }
}

函数 registerCommand 会设置 service.commands

接受 3 个参数：

name

opts

registerCommand (name, opts, fn) {
  if (typeof opts === "function") {
    fn = opts
    opts = null
  }
  this.service.commands[name] = { fn, opts: opts || {}}
}

我们再看一下 cli-service/bin/vue-cli-service.js

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

cli-service/lib/Service.js 会调用 run 方法：

async run (name, args = {}, rawArgv = []) {
}

里面会从 commands 里面取：

let command = this.commands[name]

最终执行它里面的 fn：

const { fn } = command
return fn(args, rawArgv)

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97323.html

[全网最全的 Vue CLI 3 原创合集] 你要的这里都有

摘要：慢慢地，关于的原创学习文章已经写了多篇了会一直放出来，目前篇，因此做一个合集，献给那些对新版本脚手架使用和背后设计感兴趣的同学，都是一步一步去看源码，也给官方提了几次，合进去了几个原创不易，欢迎大家互相转发，期望大家一起快速过度到版本目录慢慢地，关于 Vue CLI 3 的原创学习文章已经写了 20 多篇了（会一直放出来，目前 23 篇），因此做一个合集，献给那些对新版本脚手架使用...

phpmatt 2019-08-23 12:00 评论0 收藏0
vue-cli系列之vue-cli-service整体架构浅析。

摘要：不符合则打印错误并退出。上面实例化并调用了的方法，这里从构造函数到一路浏览即可。每个插件的导出为例如中的根据命令行收到的参数，执行该插件的业务逻辑业务逻辑需要的其他函数注意着里是先在构造函数中了插件。并以对象形式返回。概述 vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个v...

FrancisSoung 2019-08-23 14:41 评论0 收藏0
[Vue CLI 3] vue inspect 的源码设计实现

摘要：首先，请记住它在新版本的脚手架项目里面非常重要它有什么用呢能快速地在控制台看到对应生成的配置对象。最后多是通过的函数来生成，最终在控制台打印首先，请记住：它在新版本的脚手架项目里面非常重要它有什么用呢？ inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象。首先它是 vue 的一个扩展命令，在文件 @vue/c...

leiyi 2019-08-23 11:42 评论0 收藏0
VS Code插件开发介绍（一）

摘要：发布插件插件开发完后就可以发布了，需要安装安装完后，需要去注册并生成一个。总结本文介绍了插件开发的基本流程，实现了一个简单的插件。更多的开发技巧，可以看这个系列的第二篇插件开发介绍二前言前段时间做了一个基于命令行的效率工具，可以自动生成组件的模板代码。自己用起来还觉得挺好，但在组内案例几次后大家都不愿意用，究其原因还是命令行工具使用起来门槛有点高，不方便。由于组内已经统一使用VS ...

thursday 2019-08-23 12:17 评论0 收藏0