Vue-cli@3.0 插件系統(tǒng)簡析

// package.json
"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
}

#!/usr/bin/env node
const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const Service = require('../lib/Service') // 引入 Service 基類
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()) // 實例化 service
const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv)
const command = args._[0]
service.run(command, args, rawArgv).catch(err => { // 開始執(zhí)行對應(yīng)的 service 服務(wù)
 error(err)
 process.exit(1)
})

class Service {
 constructor(context) {
 ...
 this.webpackChainFns = [] // 數(shù)組內(nèi)部每項為一個fn
 this.webpackRawConfigFns = [] // 數(shù)組內(nèi)部每項為一個 fn 或 webpack 對象字面量配置項
 this.devServerConfigFns = []
 this.commands = {} // 緩存動態(tài)注冊 CLI 命令
 ...
 this.plugins = this.resolvePlugins(plugins, useBuiltIn) // 完成插件的加載
 this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => { // 緩存不同 CLI 命令執(zhí)行時所對應(yīng)的mode值
  return Object.assign(modes, defaultModes)
 }, {}) 
 }
}

async run (name, args = {}, rawArgv = []) {
 const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
 // load env variables, load user config, apply plugins
 // 執(zhí)行所有被加載進來的插件
 this.init(mode)
 ...
 const { fn } = command
 return fn(args, rawArgv) // 開始執(zhí)行對應(yīng)的 cli 命令服務(wù)
}
init (mode = process.env.VUE_CLI_MODE) {
 ...
 // 執(zhí)行plugins
 // apply plugins.
 this.plugins.forEach(({ id, apply }) => {
 // 傳入一個實例化的PluginAPI實例，插件名作為插件的id標識，在插件內(nèi)部完成注冊 cli 命令服務(wù)和 webpack 配置的更新的工作
 apply(new PluginAPI(id, this), this.projectOptions)
 })
 ...
 // apply webpack configs from project config file
 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) // 加載對應(yīng)的插件
 })
 let plugins
 // @vue/cli-service內(nèi)部提供的插件
 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)
 if (inlinePlugins) {
  plugins = useBuiltIn !== false
  ? builtInPlugins.concat(inlinePlugins)
  : inlinePlugins
 } else {
  // 加載項目當中使用的插件
  const projectPlugins = Object.keys(this.pkg.devDependencies || {})
  .concat(Object.keys(this.pkg.dependencies || {}))
  .filter(isPlugin)
  .map(idToPlugin)
  plugins = builtInPlugins.concat(projectPlugins)
 }
 // Local plugins
 if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {
  const files = this.pkg.vuePlugins.service
  if (!Array.isArray(files)) {
  throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`)
  }
  plugins = plugins.concat(files.map(file => ({
  id: `local:${file}`,
  apply: loadModule(file, this.pkgContext)
  })))
 }
 return plugins
 }

this.plugins.forEach(({ id, apply }) => {
 apply(new PluginAPI(id, this), this.projectOptions)
 })

class PluginAPI {
 constructor (id, service) {
 this.id = id   // 對應(yīng)這個插件名
 this.service = service // 對應(yīng) Service 類的實例(單例)
 }
 ...
 registerCommand (name, opts, fn) { // 注冊自定義 cli 命令
 if (typeof opts === 'function') {
  fn = opts
  opts = null
 }
 this.service.commands[name] = { fn, opts: opts || {}}
 }
 chainWebpack (fn) {  // 緩存變更的 webpack 配置
 this.service.webpackChainFns.push(fn)
 }
 configureWebpack (fn) { // 緩存變更的 webpack 配置
 this.service.webpackRawConfigFns.push(fn)
 }
 ...
}

// commands/serve
module.exports = (api, options) => {
 api.registerCommand(
 'serve',
 {
  description: 'start development server',
  usage: 'vue-cli-service serve [options] [entry]',
  options: {
  '--open': `open browser on server start`,
  '--copy': `copy url to clipboard on server start`,
  '--mode': `specify env mode (default: development)`,
  '--host': `specify host (default: ${defaults.host})`,
  '--port': `specify port (default: ${defaults.port})`,
  '--https': `use https (default: ${defaults.https})`,
  '--public': `specify the public network URL for the HMR client`
  }
 },
 async function serve(args) {
  // do something
 }
 )
}

module.exports = (api, options) => {
 api.chainWebpack(webpackConfig => {
 webpackConfig.module
  .rule('vue')
  .test(/\.vue$/)
  .use('cache-loader')
  .loader('cache-loader')
  .options(vueLoaderCacheConfig)
  .end()
  .use('vue-loader')
  .loader('vue-loader')
  .options(
  Object.assign(
   {
   compilerOptions: {
    preserveWhitespace: false
   }
   },
   vueLoaderCacheConfig
  )
  )
 })
}

vue create <project>
vue ui

// @vue/cli/lib/add.js
async function add (pluginName, options = {}, context = process.cwd()) {
 ...
 const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
 // 開始安裝這個插件
 await installPackage(context, packageManager, null, packageName)
 log(`${chalk.green('✔')} Successfully installed plugin: ${chalk.cyan(packageName)}`)
 log()
 // 判斷插件是否提供了 generator 
 const generatorPath = resolveModule(`${packageName}/generator`, context)
 if (generatorPath) {
 invoke(pluginName, options, context)
 } else {
 log(`Plugin ${packageName} does not have a generator to invoke`)
 }
}

// @vue/cli/lib/invoke.js
async function invoke (pluginName, options = {}, context = process.cwd()) {
 const pkg = getPkg(context)
 ...
 // 從項目應(yīng)用package.json中獲取插件名
 const id = findPlugin(pkg.devDependencies) || findPlugin(pkg.dependencies)
 ...
 // 加載對應(yīng)插件提供的generator方法
 const pluginGenerator = loadModule(`${id}/generator`, context)
 ...
 const plugin = {
 id,
 apply: pluginGenerator,
 options
 }
 // 開始執(zhí)行g(shù)enerator方法
 await runGenerator(context, plugin, pkg)
}
async function runGenerator (context, plugin, pkg = getPkg(context)) {
 ...
 // 實例化一個Generator實例
 const generator = new Generator(context, {
 pkg
 plugins: [plugin], // 插件提供的generator方法
 files: await readFiles(context), // 將項目當中的文件讀取為字符串的形式保存到內(nèi)存當中，被讀取的文件規(guī)則具體見readFiles方法
 completeCbs: createCompleteCbs,
 invoking: true
 })
 ...
 // resolveFiles 將內(nèi)存當中的所有緩存的 files 輸出到文件當中
 await generator.generate({
 extractConfigFiles: true,
 checkExisting: true
 })
}

// @vue/cli/lib/Generator.js
module.exports = class Generator {
 constructor (context, {
 pkg = {},
 plugins = [],
 completeCbs = [],
 files = {},
 invoking = false
 } = {}) {
 this.context = context
 this.plugins = plugins
 this.originalPkg = pkg
 this.pkg = Object.assign({}, pkg)
 this.imports = {}
 this.rootOptions = {}
 ...
 this.invoking = invoking
 // for conflict resolution
 this.depSources = {}
 // virtual file tree
 this.files = files
 this.fileMiddlewares = []
 this.postProcessFilesCbs = []
 ...
 const cliService = plugins.find(p => p.id === '@vue/cli-service')
 const rootOptions = cliService
  ? cliService.options
  : inferRootOptions(pkg)
 // apply generators from plugins
 // 每個插件對應(yīng)生成一個 GeneratorAPI 實例，并將實例 api 傳入插件暴露出來的 generator 函數(shù)
 plugins.forEach(({ id, apply, options }) => {
  const api = new GeneratorAPI(id, this, options, rootOptions)
  apply(api, options, rootOptions, invoking)
 })
 }
}

module.exports = (api, { config, lintOn = [] }, _, invoking) => {
 if (typeof lintOn === 'string') {
 lintOn = lintOn.split(',')
 }
 const eslintConfig = require('./eslintOptions').config(api)
 const pkg = {
 scripts: {
  lint: 'vue-cli-service lint'
 },
 eslintConfig,
 devDependencies: {}
 }
 if (config === 'airbnb') {
 eslintConfig.extends.push('@vue/airbnb')
 Object.assign(pkg.devDependencies, {
  '@vue/eslint-config-airbnb': '^3.0.0-rc.10'
 })
 } else if (config === 'standard') {
 eslintConfig.extends.push('@vue/standard')
 Object.assign(pkg.devDependencies, {
  '@vue/eslint-config-standard': '^3.0.0-rc.10'
 })
 } else if (config === 'prettier') {
 eslintConfig.extends.push('@vue/prettier')
 Object.assign(pkg.devDependencies, {
  '@vue/eslint-config-prettier': '^3.0.0-rc.10'
 })
 } else {
 // default
 eslintConfig.extends.push('eslint:recommended')
 }
 ...
 api.extendPackage(pkg)
 ...
 // lint & fix after create to ensure files adhere to chosen config
 if (config && config !== 'base') {
 api.onCreateComplete(() => {
  require('./lint')({ silent: true }, api)
 })
 }
}