vue-cli系列之vue-cli-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}.\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 mand = args._[0]

// 将参数传入service这个实例并启动后续工作。如果我们运行的是npm run serve。则mand = "serve"。
service.run(mand, args, rawArgv).catch(err => {
 error(err)
 process.exit(1)
})

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.mands = {}
  // 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 => {
  //    // 根据命令行收到的参数，执行该插件的业务逻辑
  //  })
  //  // 业务逻辑需要的其他函数
  /