概述

vue启动一个项目的时刻，须要实行npm run serve，个中这个serve的内容就是vue-cli-service serve。可见，项目的启动症结是这个vue-cli-service与它的参数serve。接下来我们一同看看service中重要写了什么东东（重要内容以备注情势写到代码中。）。

症结代码

vue-cli-service.js

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

// 检测node版本是不是相符vue-cli运转的需求。不相符则打印毛病并退出。
if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
  )
  process.exit(1)
}

// cli-service的中心类。
const Service = require('../lib/Service')
// 新建一个service的实例。并将项目途径传入。平常我们在项目根途径下运转该cli敕令。所以process.cwd()的效果平常是项目根途径
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这个实例并启动后续事情。假如我们运转的是npm run serve。则command = "serve"。
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

Service.js

上面实例化并挪用了service的run要领，这里从组织函数到run一起浏览即可。

const fs = require('fs')
const path = require('path')
const debug = require('debug')
const chalk = require('chalk')
const readPkg = require('read-pkg')
const merge = require('webpack-merge')
const Config = require('webpack-chain')
const PluginAPI = require('./PluginAPI')
const loadEnv = require('./util/loadEnv')
const defaultsDeep = require('lodash.defaultsdeep')
const { warn, error, isPlugin, loadModule } = require('@vue/cli-shared-utils')

const { defaults, validate } = require('./options')

module.exports = class Service {
  constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
    process.VUE_CLI_SERVICE = this
    this.initialized = false
    // 平常是项目根目录途径。
    this.context = context
    this.inlineOptions = inlineOptions
    // webpack相干网络。不是本文重点。所以未列出该要领完成
    this.webpackChainFns = []
    this.webpackRawConfigFns = []
    this.devServerConfigFns = []
    //存储的敕令。
    this.commands = {}
    // Folder containing the target package.json for plugins
    this.pkgContext = context
    // 键值对存储的pakcage.json对象，不是本文重点。所以未列出该要领完成
    this.pkg = this.resolvePkg(pkg)
    // **这个要领下方须要重点浏览。**
    this.plugins = this.resolvePlugins(plugins, useBuiltIn)
    
    // 效果为{build: production, serve: development, ... }。粗心是网络插件中的默许设置信息
    // 标注build敕令重要用于临盆环境。
    this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {
      return Object.assign(modes, defaultModes)
    }, {})
  }

  init (mode = process.env.VUE_CLI_MODE) {
    if (this.initialized) {
      return
    }
    this.initialized = true
    this.mode = mode

    // 加载.env文件中的设置
    if (mode) {
      this.loadEnv(mode)
    }
    // load base .env
    this.loadEnv()

    // 读取用户的设置信息.平常为vue.config.js
    const userOptions = this.loadUserOptions()
    // 读取项目的设置信息并与用户的设置兼并(用户的优先级高)
    this.projectOptions = defaultsDeep(userOptions, defaults())

    debug('vue:project-config')(this.projectOptions)

    // 注册插件。
    this.plugins.forEach(({ id, apply }) => {
      apply(new PluginAPI(id, this), this.projectOptions)
    })

    // wepback相干设置网络
    if (this.projectOptions.chainWebpack) {
      this.webpackChainFns.push(this.projectOptions.chainWebpack)
    }
    if (this.projectOptions.configureWebpack) {
      this.webpackRawConfigFns.push(this.projectOptions.configureWebpack)
    }
  }


  resolvePlugins (inlinePlugins, useBuiltIn) {
    const idToPlugin = id => ({
      id: id.replace(/^.\//, 'built-in:'),
      apply: require(id)
    })

    let plugins
    
    
    // 重如果这里。map获得的每一个插件都是一个{id, apply的情势}
    // 个中require(id)将直接import每一个插件的默许导出。
    // 每一个插件的导出api为
    // module.exports = (PluginAPIInstance,projectOptions) => {
    //    PluginAPIInstance.registerCommand('cmdName（比方npm run serve中的serve）', args => {
    //        // 依据敕令行收到的参数，实行该插件的营业逻辑
    //    })
    //    //  营业逻辑须要的其他函数
    //}
    // 注重着里是先在组织函数中resolve了插件。然后再run->init->要领中将敕令，经由过程这里的的apply要领，
    // 将插件对应的敕令注册到了service实例。
    const builtInPlugins = [
      './commands/serve',
      './commands/build',
      './commands/inspect',
      './commands/help',
      // config plugins are order sensitive
      './config/base',
      './config/css',
      './config/dev',
      './config/prod',
      './config/app'
    ].map(idToPlugin)
    
    // inlinePlugins与非inline得处置惩罚。默许天生的项目直接运转时刻，除了上述数组的插件['./commands/serve'...]外，还会有
    // ['@vue/cli-plugin-babel','@vue/cli-plugin-eslint','@vue/cli-service']。
    // 处置惩罚效果是二者的兼并，细节省略。
    if (inlinePlugins) {
        //...
    } else {
        //...默许走这条线路
      plugins = builtInPlugins.concat(projectPlugins)
    }

    // Local plugins 处置惩罚package.json中引入插件的情势，详细代码省略。

    return plugins
  }

  async run (name, args = {}, rawArgv = []) {
    // mode是dev照样prod？
    const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])

    // 网络环境变量、插件、用户设置
    this.init(mode)

    args._ = args._ || []
    let command = this.commands[name]
    if (!command && name) {
      error(`command "${name}" does not exist.`)
      process.exit(1)
    }
    if (!command || args.help) {
      command = this.commands.help
    } else {
      args._.shift() // remove command itself
      rawArgv.shift()
    }
    // 实行敕令。比方vue-cli-service serve 则，实行serve敕令。
    const { fn } = command
    return fn(args, rawArgv)
  }

  // 网络vue.config.js中的用户设置。并以对象情势返回。
  loadUserOptions () {
    // 此处代码省略，能够简朴理解为
    // require(vue.config.js)
    return resolved
  }
}

PluginAPI

这里重如果连接了plugin的注册和service实例。笼统过的代码以下

class PluginAPI {

  constructor (id, service) {
    this.id = id
    this.service = service
  }
  // 在service的init要领中
  // 该函数会被挪用，挪用途以下。
  // // apply plugins.
  // 这里的apply就是插件暴露出来的函数。该函数将PluginAPI实例和项目设置信息(比方vue.config.js)作为参数传入
  // 经由过程PluginAPIInstance.registerCommand要领，将敕令注册到service实例。
  //  this.plugins.forEach(({ id, apply }) => {
  //    apply(new PluginAPI(id, this), this.projectOptions)
  //  })
  registerCommand (name, opts, fn) {
    if (typeof opts === 'function') {
      fn = opts
      opts = null
    }
    this.service.commands[name] = { fn, opts: opts || {}}
  }


}

module.exports = PluginAPI

总结

经由过程vue-cli-service中的new Service，加载插件信息，缓存到Service实例的plugins变量中。
当获得敕令行参数后，在经由过程new Service的run要领，实行敕令。
该run要领中挪用了init要领获取到项目中的设置信息（默许&用户的兼并）,比方用户的设置在vue.config.js中。
init过程当中经由过程pluginAPI这个类，将service和插件plugins竖立关联。关联存放到service.commands中。
末了经由过程commands[cmdArgName]挪用该要领，完成了插件要领的挪用。

首次浏览，只是看到了敕令形式的现实运用。能想到的好就是，新增添一个插件的时刻，只须要增添一个插件的文件，并不须要变动其他文件的逻辑。其他的部份，再逐步体味吧。。。