vue-cli系列之vue-cli-rvice整体架构浅析
概述
vue启动⼀个项⽬的时候，需要执⾏npm run rve，其中这个rve的内容就是vue-cli-rvice rve。可见，项⽬的启动关键是这个vue-cli-rvice与它的参数rve。接下来我们⼀起看看rvice中主要写了什么东东（主要内容以备注形式写到代码中。）。
关键代码
vue-cli-rvice.js
const mver = require('mver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').de
// 检测node版本是否符合vue-cli运⾏的需求。不符合则打印错误并退出。
if (!mver.satisfies(process.version, requiredVersion)) {
error(
`You are using Node ${process.version}, but vue-cli-rvice ` +
`requires Node ${requiredVersion}.\nPlea upgrade your Node version.`
)
}
// cli-rvice的核⼼类。
const Service = require('../lib/Service')
// 新建⼀个rvice的实例。并将项⽬路径传⼊。⼀般我们在项⽬根路径下运⾏该cli命令。所以process.cwd()的结果⼀般是项⽬根路径
const rvice = new v.VUE_CLI_CONTEXT || process.cwd())
// 参数处理。
const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv, {
boolean: [
// build
'modern',
'report',
'report-json',
'watch',
// rve
'open',
'copy',
'https',
// inspect
'verbo'frontier business company
]
})
const command = args._[0]
// 将参数传⼊rvice这个实例并启动后续⼯作。如果我们运⾏的是npm run rve。则command = "rve"。
rvice.run(command, args, rawArgv).catch(err => {
error(err)
fornication
})
Service.js
上⾯实例化并调⽤了rvice的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')
constructor (context, { plugins, pkg, inlineOptions, uBuiltIn } = {}) {
process.VUE_CLI_SERVICE = this
this.initialized = fal
快速祛痘的方法
// ⼀般是项⽬根⽬录路径。
this.inlineOptions = inlineOptions
// webpack相关收集。不是本⽂重点。所以未列出该⽅法实现
this.webpackChainFns = []
this.webpackRawConfigFns = []
this.devServerConfigFns = []
//存储的命令。
// Folder containing the target package.json for plugins
this.pkgContext = context
// 键值对存储的pakcage.json对象，不是本⽂重点。所以未列出该⽅法实现
this.pkg = solvePkg(pkg)
// **这个⽅法下⽅需要重点阅读。**
this.plugins = solvePlugins(plugins, uBuiltIn)
/
/ 结果为{build: production, rve: development, ... }。⼤意是收集插件中的默认配置信息 // 标注build命令主要⽤于⽣产环境。
return Object.assign(modes, defaultModes)
}, {})
}
cracksinit (mode = v.VUE_CLI_MODE) {
if (this.initialized) {
return
}
this.initialized = true
// 加载.env⽂件中的配置
if (mode) {
this.loadEnv(mode)
}
// load ba .env
this.loadEnv()
// 读取⽤户的配置信息.⼀般为fig.js
const urOptions = this.loadUrOptions()
// 读取项⽬的配置信息并与⽤户的配置合并(⽤户的优先级⾼)
this.projectOptions = defaultsDeep(urOptions, defaults())
debug('vue:project-config')(this.projectOptions)
/
/ 注册插件。
this.plugins.forEach(({ id, apply }) => {
apply(new PluginAPI(id, this), this.projectOptions)diel
})
// wepback相关配置收集
if (this.projectOptions.chainWebpack) {
this.webpackChainFns.push(this.projectOptions.chainWebpack)
}
if (figureWebpack) {
this.webpackRawConfigFns.push(figureWebpack)
}
}
resolvePlugins (inlinePlugins, uBuiltIn) {
const idToPlugin = id => ({
id: id.replace(/^.\//, 'built-in:'),
apply: require(id)
})
let plugins
// 主要是这⾥。map得到的每个插件都是⼀个{id, apply的形式}
// 其中require(id)将直接import每个插件的默认导出。
// 每个插件的导出api为
// ports = (PluginAPIInstance,projectOptions) => {
/
/ isterCommand('cmdName（例如npm run rve中的rve）', args => {
// // 根据命令⾏收到的参数，执⾏该插件的业务逻辑
// })
// // 业务逻辑需要的其他函数
//}
// 注意着⾥是先在构造函数中resolve了插件。然后再run->init->⽅法中将命令，通过这⾥的的apply⽅法，
// 将插件对应的命令注册到了rvice实例。
const builtInPlugins = [
'./commands/rve',
'./commands/build',
'./commands/inspect',
'./commands/help',
// config plugins are order nsitive
'./config/ba',
intercour
'./config/css',
'./config/dev',
'./config/prod',
'./config/app'
].map(idToPlugin)
// inlinePlugins与⾮inline得处理。默认⽣成的项⽬直接运⾏时候，除了上述数组的插件['./commands/rve'...]外，还会有 // ['@vue/cli-plugin-babel','@vue/cli-plugin-eslint','@vue/cli-rvice']。
// 处理结果是两者的合并，细节省略。
if (inlinePlugins) {
//...
} el {
//...默认⾛这条路线
plugins = at(projectPlugins)
}
// Local plugins 处理package.json中引⼊插件的形式，具体代码省略。
return plugins
}
lo controlasync run (name, args = {}, rawArgv = []) {
// mode是dev还是prod？
const mode = de || (name === 'build' && args.watch ? 'development' : des[name])13一15younggir1
// 收集环境变量、插件、⽤户配置
this.init(mode)
birthdaycakeargs._ = args._ || []
let command = ands[name]
if (!command && name) {
error(`command "${name}" does not exist.`)
}
if (!command || args.help) {
command = ands.help
} el {
args._.shift() // remove command itlf
rawArgv.shift()
}
// 执⾏命令。例如vue-cli-rvice rve 则，执⾏rve命令。
const { fn } = command
return fn(args, rawArgv)
}
深圳卓越教育
// 收集fig.js中的⽤户配置。并以对象形式返回。
loadUrOptions () {
// 此处代码省略，可以简单理解为
/
/ fig.js)
return resolved
}
}
PluginAPI
这⾥主要是连接了plugin的注册和rvice实例。抽象过的代码如下
class PluginAPI {
constructor (id, rvice) {
this.id = id
this.rvice = rvice
}
/
/ 在rvice的init⽅法中
// 该函数会被调⽤，调⽤处如下。
// // apply plugins.
// 这⾥的apply就是插件暴露出来的函数。该函数将PluginAPI实例和项⽬配置信息(例如fig.js)作为参数传⼊
// 通过isterCommand⽅法，将命令注册到rvice实例。
// this.plugins.forEach(({ id, apply }) => {
// apply(new PluginAPI(id, this), this.projectOptions)
// })
registerCommand (name, opts, fn) {
if (typeof opts === 'function') {
fn = opts
opts = null
}
ands[name] = { fn, opts: opts || {}}
}
}
总结
通过vue-cli-rvice中的new Service，加载插件信息，缓存到Service实例的plugins变量中。
当得到命令⾏参数后，在通过new Service的run⽅法，执⾏命令。
该run⽅法中调⽤了init⽅法获取到项⽬中的配置信息（默认&⽤户的合并），例如⽤户的配置在fig.js中。
init过程中通过pluginAPI这个类，将rvice和插件plugins建⽴关联。关系存放到ands中。
最后通过commands[cmdArgName]调⽤该⽅法，完成了插件⽅法的调⽤。
初次阅读，只是看到了命令模式的实际应⽤。能想到的好就是，新增加⼀个插件的时候，只需要增加⼀个插件的⽂件，并不需要更改其他⽂件的逻辑。其他的部分，再慢慢体会吧。。。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
