vue CLI 用起來的確很舒服项阴，方便省事，但他經(jīng)過層層封裝很難明白，執(zhí)行完那個npm run serve/build 后他都干了些什么槐壳，甚至不知道整個項目是怎么跑起來的，今天自己抽時間就去瞅瞅,為加深記錄特此記錄記錄
【聲明】純屬個人學(xué)習(xí)推敲喜每，有不對的地方歡迎指正务唐，我們一起討論共同學(xué)習(xí)一起進(jìn)步
一、探尋npm run 背后的真實操作
1带兜、看看 npm run serve
首選從npm run serve 開始枫笛，整個應(yīng)該都很熟悉了，執(zhí)行這命令后就是執(zhí)行刚照，package.json 的script 中key為serve后面的值
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
其實真實的執(zhí)行命令是這一個 npm run vue-cli-service serve 命令刑巧，那這個是個啥意思我們做個測試,添加個test 進(jìn)行測試
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test":"echo hello vue "
},
再來執(zhí)行下命令 run , 看如下打印
D:\YLKJPro\fgzs>npm run test
> sdz@0.1.0 test D:\YLKJPro\fgzs
> echo hello vue
hello vue
其實就是執(zhí)行了test 后面的echo , 那么 npm run vue-cli-service serve 后面的serve 是干啥的呢？再來看看
D:\YLKJPro\fgzs>npm run test serve
> sdz@0.1.0 test D:\YLKJPro\fgzs
> echo hello vue "serve"
hello vue "serve"
其實就是將后面的當(dāng)成了參數(shù)
2无畔、仿造一個serve
如果不信啊楚，我們再來做一個測試看看(仿造一個 serve)
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test":"my-npm-test serve"
},
執(zhí)行npm run test 輸出如下
D:\YLKJPro\fgzs>npm run test
> sdz@0.1.0 test D:\YLKJPro\fgzs
> my-npm-test serve
serve
咦，奇怪了 浑彰， serve 怎么打印出來的呢恭理，我并沒有使用echo ？其實我是模仿了原來的腳本郭变，
2-1. 創(chuàng)建測試文件夾
先在node_modules下創(chuàng)建一個mytest/bin目錄颜价，同時在該bin目錄下創(chuàng)建一個測試的js涯保，如下
這個測試的js 也很簡單就是把那個接收的參數(shù)打印出來,如下：
#!/usr/bin/env node
const rawArgv = process.argv.slice(2)
console.log(rawArgv[0])
2-2. 在 node_modules/.bin下創(chuàng)建測試腳本
添加了一個 linux 和 windows 的shell 腳本（my-npm-test和my-npm-test.cmd）
其實里面就一些目標(biāo)js的路徑
2-3. 添加my-npm-test
my-npm-test
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../mytest/bin/my-npm-test.js" "$@"
ret=$?
else
node "$basedir/../mytest/bin/my-npm-test.js" "$@"
ret=$?
fi
exit $ret
2-4. 添加my-npm-test.cmd
my-npm-test.cmd 用于windows 端
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\mytest\bin\my-npm-test.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\mytest\bin\my-npm-test.js" %*
)
到這里總算對npm run 有些了解了；
其實 執(zhí)行 npm help run 官方也有想對應(yīng)的解釋 如
2-5. 執(zhí)行原理
使用npm run script執(zhí)行腳本的時候都會創(chuàng)建一個shell周伦，然后在shell中執(zhí)行指定的腳本夕春。
這個shell會將當(dāng)前項目的可執(zhí)行依賴目錄（即node_modules/.bin）添加到環(huán)境變量path中，當(dāng)執(zhí)行之后之后再恢復(fù)原樣横辆。就是說腳本命令中的依賴名會直接找到node_modules/.bin下面的對應(yīng)腳本撇他，而不需要加上路徑。
2-6. 舉一反三探尋npm run serve
好吧到這了總算知道npm run 并不是那么神秘了狈蚤，咦 好像搞了半天還沒說到困肩，npm run serve 相關(guān)的東西，其實這已經(jīng)講完了脆侮，仔細(xì)一想锌畸，npm run serve === npm run vue-cli-service serve ,那么node_modules/.bin下面一定有兩個vue-cli-service的文件，找找靖避。潭枣。。
果不其然幻捏，再打開看看盆犁，他最終執(zhí)行的js 是什么。打開文件
根據(jù)路徑可以找到node_modules/@vue下對應(yīng)的 js篡九，
如下：
OK谐岁， 總算找到了真正的執(zhí)行者，那這個文件又干了些什么呢榛臼，項目就這么啟動了伊佃？
二、項目編譯詳解
我們打開這個vue-cli-service.js （代碼就不行行詳細(xì)講解了沛善，直接借助大佬博客https://segmentfault.com/a/1190000017876208）
1航揉、關(guān)于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()的結(jié)果一般是項目根路徑
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]
// 將我們執(zhí)行npm run serve 的serve參數(shù)傳入service這個實例并啟動后續(xù)工作抵屿。(如果我們運行的是npm run build庆锦。那么接收的參數(shù)即為build)。
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
上面js 最后調(diào)用了../lib/Service 中的run來進(jìn)行項目的構(gòu)建 轧葛，那再去看看 Service.js 又做了些什么
2搂抒、關(guān)于Service.js
// ...省略import
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相關(guān)收集。不是本文重點求晶。所以未列出該方法實現(xiàn)
this.webpackChainFns = []
this.webpackRawConfigFns = []
this.devServerConfigFns = []
//存儲的命令焰雕。
this.commands = {}
// Folder containing the target package.json for plugins
this.pkgContext = context
// 鍵值對存儲的pakcage.json對象，不是本文重點芳杏。所以未列出該方法實現(xiàn)
this.pkg = this.resolvePkg(pkg)
// **這個方法下方需要重點閱讀矩屁。**
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()
// 讀取項目的配置信息并與用戶的配置合并(用戶的優(yōu)先級高)
this.projectOptions = defaultsDeep(userOptions, defaults())
debug('vue:project-config')(this.projectOptions)
// 注冊插件吝秕。
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得到的每個插件都是一個{id, apply的形式}
// 其中require(id)將直接import每個插件的默認(rèn)導(dǎo)出空幻。
// 每個插件的導(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方法约郁，
// 將插件對應(yīng)的命令注冊到了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得處理但两。默認(rèn)生成的項目直接運行時候鬓梅，除了上述數(shù)組的插件['./commands/serve'...]外，還會有
// ['@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中的用戶配置挎挖。并以對象形式返回这敬。
loadUserOptions () {
// 此處代碼省略，可以簡單理解為
// require(vue.config.js)
return resolved
}
}
2-1. command 中的fn
看到上面說的
// 執(zhí)行命令蕉朵。例如vue-cli-service serve 則崔涂，執(zhí)行serve命令。
const { fn } = command
return fn(args, rawArgv)
其實還是不明吧始衅，command中他究竟執(zhí)行了個什么操作冷蚂，那不妨來個console
我們再運行下 run build 來看究竟缭保，一執(zhí)行屏幕就打印了一異步函數(shù)
咦這是哪里的，不要忘記了蝙茶，上面說的在運行npm run build 時我們給他傳入了一個build的參數(shù)
而在代碼的解析中我們知道艺骂，在constructor構(gòu)造時就將其所需外部plugin編譯到了command中
所以根據(jù)builtInPlugins這里的操作，我們就能找到這個異步函數(shù)是在commands/build/index.js中, 到該文件一看就都明白了
接下來還有一個是 PluginAPI 進(jìn)行插件編譯的js
3隆夯、關(guān)于PluginAPI
class PluginAPI {
constructor (id, service) {
this.id = id
this.service = service
}
// 在service的init方法中
// 該函數(shù)會被調(diào)用钳恕，調(diào)用處如下。
// // apply plugins.
// 這里的apply就是插件暴露出來的函數(shù)蹄衷。該函數(shù)將PluginAPI實例和項目配置信息(例如vue.config.js)作為參數(shù)傳入
// 通過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項目的構(gòu)建愧口，直接瀏覽器輸入地址就可以看見效果了(一步步操作看完宙址，是否感覺還是蠻復(fù)雜的呢- -哪有什么歲月靜好，不過是有人替你負(fù)重前行罷了)
