首先,我们看到在 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)