摘要：不符合則打印錯誤并退出。上面實例化并調用了的方法，這里從構造函數到一路瀏覽即可。每個插件的導出為例如中的根據命令行收到的參數，執行該插件的業務邏輯業務邏輯需要的其他函數注意著里是先在構造函數中了插件。并以對象形式返回。

vue啟動一個項目的時候，需要執行npm run serve，其中這個serve的內容就是vue-cli-service serve?？梢?，項目的啟動關鍵是這個vue-cli-service與它的參數serve。接下來我們一起看看service中主要寫了什么東東（主要內容以備注形式寫到代碼中。）。

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}.
Please 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的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
  }
}

這里主要是連接了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]調用該方法，完成了插件方法的調用。

初次閱讀，只是看到了命令模式的實際應用。能想到的好就是，新增加一個插件的時候，只需要增加一個插件的文件，并不需要更改其他文件的邏輯。其他的部分，再慢慢體會吧。。。