vue-cli系列之vue-cli-service整体架构浅析

概述

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]调用该方法，完成了插件方法的调用。

初次阅读，只是看到了命令模式的实际应用。能想到的好就是，新增加一个插件的时候，只需要增加一个插件的文件，并不需要更改其他文件的逻辑。其他的部分，再慢慢体会吧。。。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。