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

2024年2月29日 205次阅读 来源: dailyvuejs

首先，我们看到在 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)
    原文作者：dailyvuejs
    原文地址: https://segmentfault.com/a/1190000016253182
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞