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


Posted in Javascript onJanuary 14, 2019

概述

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

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

Javascript 相关文章推荐
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 #Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 #Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 #Javascript
vscode下vue项目中eslint的使用方法
Jan 13 #Javascript
jQuery实现的中英文切换功能示例
Jan 11 #jQuery
JavaScript寄生组合式继承原理与用法分析
Jan 11 #Javascript
JavaScript常见继承模式实例小结
Jan 11 #Javascript
You might like
php 生成饼图 三维饼图
2009/09/28 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python实现猜数游戏
2020/03/27 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
运动会广播稿30字
2014/01/21 职场文书
《将心比心》教学反思
2014/04/08 职场文书
个人职业及收入证明
2014/10/13 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
使用scrapy实现增量式爬取方式
2022/06/21 Python