Vue-cli@3.0 插件系统简析

// 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 => { // 开始执行对应的 service 服务
 error(err)
 process.exit(1)
})

class Service {
 constructor(context) {
 ...
 this.webpackChainFns = [] // 数组内部每项为一个fn
 this.webpackRawConfigFns = [] // 数组内部每项为一个 fn 或 webpack 对象字面量配置项
 this.devServerConfigFns = []
 this.commands = {} // 缓存动态注册 CLI 命令
 ...
 this.plugins = this.resolvePlugins(plugins, useBuiltIn) // 完成插件的加载
 this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => { // 缓存不同 CLI 命令执行时所对应的mode值
  return Object.assign(modes, defaultModes)
 }, {}) 
 }
}

async run (name, args = {}, rawArgv = []) {
 const mode = args.mode || (name === 'build' && args.watch "htmlcode">

resolvePlugins(inlinePlugins, useBuiltIn) {
 const idToPlugin = id => ({
  id: id.replace(/^.\//, 'built-in:'),
  apply: require(id) // 加载对应的插件
 })
 let plugins
 // @vue/cli-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)
 if (inlinePlugins) {
  plugins = useBuiltIn !== false
  "htmlcode">

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


在每个插件执行的过程中，接收到的第一个参数都是 PluginAPI 的实例，PluginAPI 也是整个 @vue/cli-service 服务当中一个核心的基类：


class PluginAPI {
 constructor (id, service) {
 this.id = id   // 对应这个插件名
 this.service = service // 对应 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)
 }
 ...
}


每个由 PluginAPI 实例化的 api 实例都提供了：

  
注册 cli 命令服务( api.registerCommand )
  
通过 api 形式去更新的 webpack 配置( api.chainWebpack )
  
通过 raw 配置形式去更新的 webpack 配置( api.configureWebpack )，与 api.chainWebpack 提供的链式 api 操作 webpack 配置的方式不同， api.configureWebpack 可接受raw式的配置形式，并通过 webpack-merge 对 webpack 配置进行合并。
  
resolve wepack 配置( api.resolveWebpackConfig )，调用之前通过 chainWebpack 和 configureWebpack 上完成的对于 webpack 配置的改造，并生成最终的 webpack 配置
  
...

  

首先我们来看下 @vue/cli-service 提供的关于动态注册 CLI 服务的插件，拿 serve 服务( ./commands/serve )来说：


// 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
 }
 )
}


./commands/serve 对外暴露一个函数，接收到的第一个参数 PluginAPI 的实例 api，并通过 api 提供的 registerCommand 方法来完成 CLI 命令(即 serve 服务)的注册。
再来看下 @vue/cli-service 内部提供的关于 webpack 配置的插件( ./config/base )：


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
  )
  )
 })
}


这个插件完成了 webpack 的基本配置内容，例如 entry、output、加载不同文件类型的 loader 的配置。 不同于之前使用的配置式的 webpack 使用方式，@vue/cli-service 默认使用 webpack-chain( 链接请戳我 ) 来完成 webpack 配置的修改 。这种方式也使得 webpack 的配置更加灵活，当你的项目迁移至 @vue/cli@3.0，使用的 webpack 插件也必须要使用 API 式的配置，同时插件不仅仅要提供插件自身的功能，同时也需要帮助调用方完成插件的注册等工作。
@vue/cli-service 将基于 webpack 的本地开发构建配置收敛至内部来实现，当你没有特殊的开发构建需求的时候，内部配置可以开箱即用，不用开发者去关心一些细节。当然在实际团队开发当中，内部配置肯定是无法满足的，得益于 @vue-cli@3.0 的插件构建设计，开发者不需要将内部的配置进行 Eject，而是直接使用 @vue/cli-service 暴露出来的 API 去完成对于特殊的开发构建需求。
以上介绍了 @vue/cli-service 插件系统当中几个核心的模块，即：
Service.js 提供服务的基类，它提供了 @vue/cli 生态当中本地开发构建时：插件加载(包括内部插件和项目应用插件)、插件的初始化，它的单例被所有的插件所共享，插件使用它的单例去完成 webpack 的更新。
PluginAPI.js 提供供插件使用的对象接口，它和插件是一一对应的关系。所有供 @vue/cli-service 使用的本地开发构建的插件接收的第一个参数都是 PluginAPI 的实例（ api ），插件使用这个实例去完成 CLI 命令的注册及对应服务的执行、webpack 配置的更新等。
以上就是 @vue/cli-service 插件系统简单的分析，感兴趣的同学可以深入阅读相关源码( 链接请戳我 )进行学习。
@vue/cli
不同于之前 1.x/2.x 的 vue-cli 工具都是基于远程模板去完成项目的初始化的工作，它属于那种大而全的方式，当你需要完成自定义的脚手架工具时，你可能要对 vue-cli 进行源码级别的改造，或者是在远程模板里面帮开发者将所有的配置文件初始化完成好。而 @vue/cli@3.0 主要是基于插件的 generator 去完成项目的初始化的工作，它将原来的大而全的模板拆解为现在基于插件系统的工作方式，每个插件完成自己所要对于项目应用的模板拓展工作。
@vue/cli 提供了终端里面的 vue 命令，例如：


vue create <project>
vue ui


当你需要对 vue-cli 进行改造，自定义符合自己开发要求的脚手架的时候，那么你需要通过 开发 vue-cli 插件来对 vue-cli 提供的服务进行拓展来满足相关的要求 。vue-cli 插件始终包含一个 Service 插件作为其主要导出，且可选的包含一个 Generator 和一个 Prompt 文件。这里不细讲如何去开发一个 vue-cli 插件了，大家感兴趣的可以阅读 vue-cli-plugin-eslint
这里主要是来看下 vue-cli 是如何设计整个插件系统以及整个插件系统是如何工作的。
@vue/cli@3.0 提供的插件安装方式为一个 cli 服务： vue add <plugin> ：

install a plugin and invoke its generator in an already created project

执行这条命令后，@vue/cli 会帮你完成插件的下载，安装以及执行插件所提供的 generator。整个流程的执行顺序可通过如下的流程图去概括：

我们来看下具体的代码逻辑：


// @vue/cli/lib/add.js
async function add (pluginName, options = {}, context = process.cwd()) {
 ...
 const packageManager = loadOptions().packageManager || (hasProjectYarn(context) "htmlcode">

// @vue/cli/lib/invoke.js
async function invoke (pluginName, options = {}, context = process.cwd()) {
 const pkg = getPkg(context)
 ...
 // 从项目应用package.json中获取插件名
 const id = findPlugin(pkg.devDependencies) || findPlugin(pkg.dependencies)
 ...
 // 加载对应插件提供的generator方法
 const pluginGenerator = loadModule(`${id}/generator`, context)
 ...
 const plugin = {
 id,
 apply: pluginGenerator,
 options
 }
 // 开始执行generator方法
 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), // 将项目当中的文件读取为字符串的形式保存到内存当中，被读取的文件规则具体见readFiles方法
 completeCbs: createCompleteCbs,
 invoking: true
 })
 ...
 // resolveFiles 将内存当中的所有缓存的 files 输出到文件当中
 await generator.generate({
 extractConfigFiles: true,
 checkExisting: true
 })
}


和 @vue/cli-service 类似，在 @vue/cli 内部也有一个核心的类 Generator ，每个 @vue/cli 的插件对应一个 Generator 的实例。在实例化 Generator 方法的过程当中，完成插件提供的 generator 的执行。


// @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
  "htmlcode">

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)
 })
 }
}


以上介绍了 @vue/cli 和插件系统相关的几个核心的模块，即：
add.js 提供了插件下载的 cli 命令服务和安装的功能；
invoke.js 完成插件所提供的 generator 方法的加载和执行，同时将项目当中的文件转化为字符串缓存到内存当中；
Generator.js 和插件进行桥接，@vue/cli 每次 add 一个插件时，都会实例化一个 Generator 实例与之对应；
GeneratorAPI.js 和插件一一对应，是 @vue/cli 暴露给插件的 api 对象，提供了很多项目应用的拓展工作。
总结
以上是对 Vue-cli@3.0 的插件系统当中两个主要部分：@vue/cli 和 @vue/cli-service 简析。

  
@vue/cli 提供 vue cli 命令，负责偏好设置，生成模板、安装插件依赖的工作，例如 vue create <projectName> 、 vue add <pluginName>
  
@vue/cli-service 作为 @vue/cli 整个插件系统当中的内部核心插件，提供了 webpack 配置更新，本地开发构建服务

  

前者主要完成了对于插件的依赖管理，项目模板的拓展等，后者主要是提供了在运行时本地开发构建的服务，同时后者也作为 @vue/cli 整个插件系统当中的内部核心插件而存在。在插件系统内部也对核心功能进行了插件化的拆解，例如 @vue/cli-service 内置的基础 webpack 配置，npm script 命令等。二者使用约定式的方式向开发者提供插件的拓展能力，具体到如何开发 @vue/cli 的插件，请参考官方文档。
以上所述是小编给大家介绍的Vue-cli@3.0 插件系统简析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

            
           
            上一篇：vue-cli3.0配置及使用注意事项详解

            下一篇：vue实现点击选中,其他的不选中方法