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

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

(0)

相关推荐

  • 详解项目升级到vue-cli3的正确姿势

    一. 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置 迁移目录 src->src static->public 对比新旧 package.json ,然后 yarn install ,完毕. 然鹅... 运行项目,报错 You are using the runtime-only build of Vue...... : 然后去查了下旧项目的相关字眼文件: 噢,原来是vue-cli3的webpack相关文件都得自己写.于是乎根据官网的指引,在

  • vue-cli3.0+element-ui上传组件el-upload的使用

    最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制.比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题.下面是我对element-ui的上传组件的一些改造, 点击查看源码. 我是自己维护了一个列表数据,再对这个列表数据进行一些操作,没用组件自带的.先看看我的组件模版 <template> <el-upload class="upload-demo" :limit="limit" :action=&

  • vue-cli2.0转3.0之项目搭建的详细步骤

    Vue CLI介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖: 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展. 一个丰富的官方插件集合,集成了前端生态中最好的工具. Vue CLI

  • 详解@Vue/Cli 3 Invalid Host header 错误解决办法

    我的host设置 报错如下: 解决办法: @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • Vue起步(无cli)的啊教程详解

    一丶项目配置 1. 创建身份证文件 2. 安装webpack webpack-cli  webpack-dev-server(全局)工具 3. 安装,配置vue vue-loader  vue-template-compiler  less-loader css-loader  style-loader  less 4. 构建项目目录,更改配置文件 ./index.html //页面文件 <div id="app"></div> <script src=&

  • vue-cli3环境变量与分环境打包的方法示例

    第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 环境变量文件只包含环境变量的"键=值"对: FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用 除

  • vue-router 起步步骤详解

    1.在main.js中导入vue-router和组件 import VueRouter from 'vue-router'; // 导入vue-router并将它命名为VueRouter import goods from './components/goods/goods'; // 引入组件 import seller from './components/seller/seller'; 2.为组件设置URL,通过url可以动态的加载组件 const urls = [ { path: '/go

  • 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-shar

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

  • Vue.js系列之项目结构说明(2)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是v

  • Vue.js系列之vue-router(上)(3)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 2.Vue.js系列之项目结构说明(2) 概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较

  • Vue组件系列开发之模态框

    项目基础工程文件是使用vue-cli3.0搭建的,这里不过多介绍.开发Vue组件系列之模态框,主要有标题.内容.定时器.按钮文案.按钮事件回调.遮罩层这些可配置项.本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出. 使用命令行 $ Vue create echi-modal $ cd echi-modal $ npm install $ npm run serve $ npm run build $ npm run lint 添加vue.config.js文件,配置如下 const

  • vue.js系列中的vue-fontawesome使用

    折腾前言 目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-awesome锲而不舍,通过 github 了解到早有大牛搞出了 vue-awesome,因此就开始折腾了-- 废话不多说,开搞! 准备工作 这个是作者的 github 地址:飞机 为了演示完整步骤,用脚手架新建个项目 正在创建中- 趁此闲话几句 这种方式使用有个好处就是,你可以自己自定义任何图标

  • 浅谈Vue知识系列-axios

    目录 axios基础知识 axios应用场景 axios基础知识 axios是独立于vue的一个项目,基于promise用于浏览器和node.js的http客户端. 在浏览器中可以帮助我们完成ajax请求的发送在node.js中可以向远程接口发送请求 axios应用场景 axios的使用 第一步:创建html文件,在body中引入两个js文件: <script src="vue.min.js"></script> <script src="axi

  • 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,分享给大家,具体如下: 添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角Apply 提示重启webstorm 重启完成后 Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Exte

  • 初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

随机推荐