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

首先，我们看到在 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
• fn

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)