从vuecli3学习webpack记录（零）整体流程

今天看了下自己之前写的从vuecli3学习webpack记录系列，感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完，可能是因为打字打的手疼，不想写了吧。今天特来补充一下。

这里是整体脉络，所以不会讲细节，细节在本系列里面已经讲到了。

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
const command = args._[0]

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

既然我们一般执行的是 vue-cli-service serve 所以，这里的 command 的值就是serve了

主要的内容就是在 Service 类了

在实例化 Service 的时候，做了什么？ 初始化属性、注册插件

run 方法干了什么？

1. 初始化，调用init 方法
2. 找到service实例的commands里面对应的serve的fn方法并执行

这里的 init 方法有必要多讲一点

{fn: function...: opts: {}}
fn

上述注册过程如下

<code>api.registerCommand('serve', {
    description: 'start development server',
    usage: 'vue-cli-service serve [options] [entry]',
    options: {
      '--open': </code><code>open browser on server start</code>,
      '--copy': <code>copy url to clipboard on server start</code>,
      '--mode': <code>specify env mode (default: development)</code>,
      '--host': <code>specify host (default: ${defaults.host})</code>,
      '--port': <code>specify port (default: ${defaults.port})</code>,
      '--https': <code>use https (default: ${defaults.https})</code>,
      '--public': <code>specify the public network URL for the HMR client</code>
    }
  }, async function serve (args) {
    info('Starting development server...')
    ...
})

Service类的很多属性的获取与更新其实都是插件通过包一个统一类 PluginAPI 来完成的，暴露出来的 fn 方法其实就是上面的第三个参数，这里才是调用的核心。

总结

设计了一个核心 Service ，它的实例属性作为一个“容器”，同时设计了一个插件类 PluginAPI 来包装真正的插件内容，

但是呢，对这个容器的操作，却是每个 PluginAPI 实例来完成。循环每个插件完成注册，然后执行入口插件的注册的方法。