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

39次阅读

共计 5444 个字符,预计需要花费 14 分钟才能阅读完成。

概述

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

初次阅读,只是看到了命令模式的实际应用。能想到的好就是,新增加一个插件的时候,只需要增加一个插件的文件,并不需要更改其他文件的逻辑。其他的部分,再慢慢体会吧。。。

正文完
 0