vue-cli系列之vue-cli-service整體架構(gòu)淺析
概述
vue啟動(dòng)一個(gè)項(xiàng)目的時(shí)候,需要執(zhí)行npm run serve,其中這個(gè)serve的內(nèi)容就是vue-cli-service serve??梢?,項(xiàng)目的啟動(dòng)關(guān)鍵是這個(gè)vue-cli-service與它的參數(shù)serve。接下來我們一起看看service中主要寫了什么東東(主要內(nèi)容以備注形式寫到代碼中。)。
關(guān)鍵代碼
vue-cli-service.js
const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node
// 檢測(cè)node版本是否符合vue-cli運(yùn)行的需求。不符合則打印錯(cuò)誤并退出。
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')
// 新建一個(gè)service的實(shí)例。并將項(xiàng)目路徑傳入。一般我們?cè)陧?xiàng)目根路徑下運(yùn)行該cli命令。所以process.cwd()的結(jié)果一般是項(xiàng)目根路徑
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
// 參數(shù)處理。
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]
// 將參數(shù)傳入service這個(gè)實(shí)例并啟動(dòng)后續(xù)工作。如果我們運(yùn)行的是npm run serve。則command = "serve"。
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
Service.js
上面實(shí)例化并調(diào)用了service的run方法,這里從構(gòu)造函數(shù)到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
// 一般是項(xiàng)目根目錄路徑。
this.context = context
this.inlineOptions = inlineOptions
// webpack相關(guān)收集。不是本文重點(diǎn)。所以未列出該方法實(shí)現(xiàn)
this.webpackChainFns = []
this.webpackRawConfigFns = []
this.devServerConfigFns = []
//存儲(chǔ)的命令。
this.commands = {}
// Folder containing the target package.json for plugins
this.pkgContext = context
// 鍵值對(duì)存儲(chǔ)的pakcage.json對(duì)象,不是本文重點(diǎn)。所以未列出該方法實(shí)現(xiàn)
this.pkg = this.resolvePkg(pkg)
// **這個(gè)方法下方需要重點(diǎn)閱讀。**
this.plugins = this.resolvePlugins(plugins, useBuiltIn)
// 結(jié)果為{build: production, serve: development, ... }。大意是收集插件中的默認(rèn)配置信息
// 標(biāo)注build命令主要用于生產(chǎn)環(huán)境。
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()
// 讀取項(xiàng)目的配置信息并與用戶的配置合并(用戶的優(yōu)先級(jí)高)
this.projectOptions = defaultsDeep(userOptions, defaults())
debug('vue:project-config')(this.projectOptions)
// 注冊(cè)插件。
this.plugins.forEach(({ id, apply }) => {
apply(new PluginAPI(id, this), this.projectOptions)
})
// wepback相關(guān)配置收集
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得到的每個(gè)插件都是一個(gè){id, apply的形式}
// 其中require(id)將直接import每個(gè)插件的默認(rèn)導(dǎo)出。
// 每個(gè)插件的導(dǎo)出api為
// module.exports = (PluginAPIInstance,projectOptions) => {
// PluginAPIInstance.registerCommand('cmdName(例如npm run serve中的serve)', args => {
// // 根據(jù)命令行收到的參數(shù),執(zhí)行該插件的業(yè)務(wù)邏輯
// })
// // 業(yè)務(wù)邏輯需要的其他函數(shù)
//}
// 注意著里是先在構(gòu)造函數(shù)中resolve了插件。然后再run->init->方法中將命令,通過這里的的apply方法,
// 將插件對(duì)應(yīng)的命令注冊(cè)到了service實(shí)例。
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得處理。默認(rèn)生成的項(xiàng)目直接運(yùn)行時(shí)候,除了上述數(shù)組的插件['./commands/serve'...]外,還會(huì)有
// ['@vue/cli-plugin-babel','@vue/cli-plugin-eslint','@vue/cli-service']。
// 處理結(jié)果是兩者的合并,細(xì)節(jié)省略。
if (inlinePlugins) {
//...
} else {
//...默認(rèn)走這條路線
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])
// 收集環(huán)境變量、插件、用戶配置
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()
}
// 執(zhí)行命令。例如vue-cli-service serve 則,執(zhí)行serve命令。
const { fn } = command
return fn(args, rawArgv)
}
// 收集vue.config.js中的用戶配置。并以對(duì)象形式返回。
loadUserOptions () {
// 此處代碼省略,可以簡(jiǎn)單理解為
// require(vue.config.js)
return resolved
}
}
PluginAPI
這里主要是連接了plugin的注冊(cè)和service實(shí)例。抽象過的代碼如下
class PluginAPI {
constructor (id, service) {
this.id = id
this.service = service
}
// 在service的init方法中
// 該函數(shù)會(huì)被調(diào)用,調(diào)用處如下。
// // apply plugins.
// 這里的apply就是插件暴露出來的函數(shù)。該函數(shù)將PluginAPI實(shí)例和項(xiàng)目配置信息(例如vue.config.js)作為參數(shù)傳入
// 通過PluginAPIInstance.registerCommand方法,將命令注冊(cè)到service實(shí)例。
// 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
總結(jié)
通過vue-cli-service中的new Service,加載插件信息,緩存到Service實(shí)例的plugins變量中。
當(dāng)?shù)玫矫钚袇?shù)后,在通過new Service的run方法,執(zhí)行命令。
該run方法中調(diào)用了init方法獲取到項(xiàng)目中的配置信息(默認(rèn)&用戶的合并),例如用戶的配置在vue.config.js中。
init過程中通過pluginAPI這個(gè)類,將service和插件plugins建立關(guān)聯(lián)。關(guān)系存放到service.commands中。
最后通過commands[cmdArgName]調(diào)用該方法,完成了插件方法的調(diào)用。
初次閱讀,只是看到了命令模式的實(shí)際應(yīng)用。能想到的好就是,新增加一個(gè)插件的時(shí)候,只需要增加一個(gè)插件的文件,并不需要更改其他文件的邏輯。其他的部分,再慢慢體會(huì)吧。。。以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語法無效的問題
今天小編就為大家分享一篇快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語法無效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識(shí)點(diǎn)內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-06-06
在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作
這篇文章主要介紹了在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
VSCode創(chuàng)建Vue項(xiàng)目的完整步驟教程
Vue是一個(gè)輕量級(jí)、漸進(jìn)式的Javascript框架,如果想要要開發(fā)全新的Vue項(xiàng)目,建議項(xiàng)目構(gòu)建工具vue-cli,下面這篇文章主要給大家介紹了關(guān)于VSCode創(chuàng)建Vue項(xiàng)目的完整步驟,需要的朋友可以參考下2022-06-06
Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
vue實(shí)現(xiàn)登陸頁面開發(fā)實(shí)踐
本文主要介紹了vue實(shí)現(xiàn)登陸頁面開發(fā)實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue實(shí)現(xiàn)移動(dòng)端彈出鍵盤功能(防止頁面fixed布局錯(cuò)亂)
這篇文章主要介紹了vue?解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題,通過實(shí)例代碼給大家分享解決方案,對(duì)vue?移動(dòng)端彈出鍵盤相關(guān)知識(shí)感興趣的朋友一起看看吧2022-04-04
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10

