最近開發(fā)和寫文章都用到了 VuePress 和 SSR，在深入學(xué)習(xí)的同時(shí)寫點(diǎn)文章記錄一下
一、最簡起步
首先按照 VuePress 的指導(dǎo)創(chuàng)建一個最小的網(wǎng)站：
mkdir vuepress-ssr
cd vuepress-ssr
yarn init -y
yarn add -D vuepress
mkdir docs
echo '# Hello VuePress' > docs/README.md
接著打開 packjge.json 并添加本地調(diào)試 & 打包的命令：
"scripts": {
"docs:dev": "npx --node-arg=--inspect vuepress dev --debug docs",
"docs:build": "npx --node-arg=--inspect vuepress build --debug docs"
}
ok 這樣最簡單的準(zhǔn)備就搞定了，不過我們暫時(shí)不急著調(diào)試，可以先來看看代碼.
二、CLI外殼 - vuepress
我們打開剛剛創(chuàng)建的項(xiàng)目的 node_modules，找到 vuepress 文件夾：
看到主邏輯文件只有 cli.js 和 index.js 兩個，再看看 package.json：
可知我們平常使用的 vuepress 調(diào)用的其實(shí)就是 cli.js 文件. 再來看看 cli.js 干了什么：
這里的 cli 其實(shí)是npm包 CAC (命令行工具)返回的操作實(shí)例，這里用到command、option、action 三個方法，執(zhí)行邏輯在 action 中
暫時(shí)忽略命令行相關(guān)的預(yù)處理和后續(xù)處理操作，這里的重點(diǎn)關(guān)注 registerCoreCommands 這個方法，上面腳本中的 vuepress dev docs 和 vuepress build docs 的邏輯就在這里的 action 中：
第 38 行開始就將運(yùn)行方法作為參數(shù)放入 wrapcommand 準(zhǔn)備執(zhí)行，dev、build 都來自 node_modules/@vuepress 的 core 文件夾：
也就是說 node_modules/vuepress 其實(shí)只是個 CLI 殼子，而真正的 dev、build、eject 邏輯都在 node_modules/@vuepress 中！
接下來我們繼續(xù)探究 @vuepress 內(nèi)部的邏輯
三、@vuepress 探究
現(xiàn)在通過 node_modules/@vuepress 的代碼來進(jìn)一步了解：
進(jìn)入 @vuepress/core 的 index.js：
在這里能看到對 dev 和 build 的預(yù)處理相同，都是通過 createApp() 創(chuàng)建一個 app，然后對 app 進(jìn)行 process 處理， 但是之后 dev 和 build 就開始進(jìn)入不同邏輯了.
3.1 createApp
createApp 就在 index.js 中，內(nèi)部返回了 new App(options) 的結(jié)果，App類的構(gòu)造器如下，主要負(fù)責(zé)環(huán)境判斷和解析目錄參數(shù)：
當(dāng)然 App類攜帶了很多很多的方法，主最要的 process、dev、build 當(dāng)然是都包括在內(nèi)的.
3.2 process
process 則包含比較多功能，經(jīng)過一番閱讀后將每個階段做的事情描述如下：
現(xiàn)在瀏覽器打開 chrome://inspect/#devices，然后運(yùn)行 yarn docs:dev (直接運(yùn)行 npx --node-arg=--inspect vuepress dev --debug docs 也行)，當(dāng) Remote Target 出現(xiàn) Target 時(shí) inspect 進(jìn)到控制臺：
進(jìn)去之后應(yīng)該什么都看不到，不慌，回剛剛代碼的 process 函數(shù)里加上一行 debugger，然后重新運(yùn)行 yarn docs:dev，現(xiàn)在回到調(diào)控制臺就可以按照自己的需要調(diào)試了：
當(dāng)執(zhí)行完 118 行的 await this.resolvePages() 之后就可以看到 pages 添加了一個 Page，也就是我們最簡網(wǎng)站的 README 文件中包含的 Hello VuePress.
整個 process 函數(shù)走完之后，可以看到在 @vuepress/core 文件夾下生成了臨時(shí)文件夾 .temp：
process 函數(shù)將項(xiàng)目資源 & 配置進(jìn)行解析，然后通過加載&運(yùn)行插件，最終生成了臨時(shí)文件. vuepress dev docs 和 vuepress build docs 共享的邏輯就到此為止了.
接下來 vuepress dev docs 會通過引入 WebpackDevServer 來啟動一個服務(wù)器， vuepress build docs 會根據(jù) client & server 的不同配置執(zhí)行 Webpack 打包，最后還會做靜態(tài)HTML渲染，這些內(nèi)容會放在下一篇文章中，敬請期待??ヽ(°▽°)ノ?
歡迎拍磚，覺得還行也歡迎點(diǎn)贊收藏~
新開公號：「無夢的冒險(xiǎn)譚」歡迎關(guān)注（搜索 Nodreame 也可以~）
旅程正在繼續(xù) ??ヽ(°▽°)ノ?
