資訊專欄INFORMATION COLUMN
摘要：一介紹隨著社區(qū)的框架的發(fā)布，社區(qū)也終于誕生了屬于自己的前后端同構(gòu)框架。本文主要研究的運(yùn)行原理，分析它從接收一條指令，到完成指令背后所發(fā)生的一系列事情。最后，通過(guò)來(lái)檢查輸出的是否存在問(wèn)題，然后發(fā)出通知，表明可用。
一、介紹
Nuxt.js - Universal Vue.js Applications
隨著react社區(qū)的next.js框架的發(fā)布，vue社區(qū)也終于誕生了屬于自己的前后端同構(gòu)框架nuxt.js。在進(jìn)一步的接觸與使用中，發(fā)現(xiàn)nuxt.js確實(shí)極大地方便了vue項(xiàng)目的開發(fā)，其背后的邏輯也值得我們玩味。關(guān)于nuxt的具體的用法請(qǐng)查閱官方文檔，本文就不一一贅述了。
本文主要研究nuxt的運(yùn)行原理，分析它從接收一條nuxt指令，到完成指令背后所發(fā)生的一系列事情。
在開始本文之前，請(qǐng)讀者務(wù)必親自體驗(yàn)過(guò)nuxt.js的使用，并且具備一定的vue.js相關(guān)開發(fā)經(jīng)驗(yàn)。
二、NUXT指令通過(guò)查看nuxt.js工程目錄下的package.json文件，我們可以看到下列幾條指令：
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
結(jié)合官網(wǎng)的介紹，我們可以知道不同的指令對(duì)應(yīng)著不同的功能：
| 指令 | 描述 |
|---|---|
| nuxt | 開啟一個(gè)監(jiān)聽3000端口的服務(wù)器，同時(shí)提供hot-reloading功能 |
| nuxt build | 構(gòu)建整個(gè)應(yīng)用，壓縮合并JS和CSS文件（用于生產(chǎn)環(huán)境） |
| nuxt start | 開啟一個(gè)生產(chǎn)模式的服務(wù)器（必須先運(yùn)行nuxt build命令） |
| nuxt generate | 構(gòu)建整個(gè)應(yīng)用，并為每一個(gè)路由生成一個(gè)靜態(tài)頁(yè)面（用于靜態(tài)服務(wù)器） |
以上幾條指令，也就是本文將要分析的重點(diǎn)：究竟這些指令的背后，nuxt都做了一些什么樣的工作呢？
三、執(zhí)行指令打開nuxt.js的工程目錄，進(jìn)入到到bin目錄，我們可以看到5個(gè)文件：
|__ nuxt |__ nuxt-build |__ nuxt-dev |__ nuxt-generate |__ nuxt-start
每個(gè)文件對(duì)應(yīng)著不同的指令。下面我們通過(guò)一張圖來(lái)分析每一條指令的執(zhí)行過(guò)程：
從上圖可知，每一條指令基本都是做了這么幾件事情：
讀取nuxt.config.js文件的配置；
實(shí)例化Nuxt()類，并把上一步讀取到的配置覆蓋Nuxt()類的默認(rèn)配置；
執(zhí)行各自具體的方法函數(shù)。
對(duì)應(yīng)代碼如下（節(jié)選）：
var nuxtConfigFile = resolve(rootDir, "nuxt.config.js")
var options = {}
if (fs.existsSync(nuxtConfigFile)) {
options = require(nuxtConfigFile)
}
if (typeof options.rootDir !== "string") {
options.rootDir = rootDir
}
var nuxt = new Nuxt(options)
nuxt.build()
第一步讀取配置以及配置的內(nèi)容可以查看官網(wǎng)說(shuō)明，下面我們將會(huì)對(duì)第二步和第三步進(jìn)行深入探討。
四、Nuxt()類進(jìn)入到nuxt/lib目錄，我們可以看到如下的文件目錄結(jié)構(gòu)：
|__ app
|__ build
|__ index.js
|__ webpack
|__ generate.js
|__ nuxt.js
|__ render.js
|__ server.js
|__ utils.js
|__ views
目錄當(dāng)中的nuxt.js文件，就是我們要實(shí)例化的Nuxt()類的所在，讓我們來(lái)看看它都包含一些什么內(nèi)容，以及各自都有些什么作用：
上圖中每一步都可以在具體的代碼中自行瀏覽。在用戶輸入指令并實(shí)例化了Nuxt()類以后，實(shí)例化出來(lái)的nuxt對(duì)象就會(huì)執(zhí)行圖中打了綠色對(duì)勾的幾個(gè)方法：build(), render(), renderRoute(), renderAndGetWindow()以及generate()方法。
同時(shí)，Nuxt()類也提供了一個(gè)close()公有方法，用于關(guān)閉其所開啟的服務(wù)器。
五、build()方法build()方法對(duì)應(yīng)著nuxt/lib/build/index.js文件，其基本構(gòu)成如下：
簡(jiǎn)單來(lái)說(shuō)，build()方法在判斷完運(yùn)行條件后，會(huì)先初始化產(chǎn)出目錄.nuxt，然后通過(guò)不同目錄下的文件結(jié)構(gòu)來(lái)生成一系列的配置，寫入模板文件后輸出到.nuxt目錄。接下來(lái)，則會(huì)根據(jù)不同的開發(fā)環(huán)境來(lái)調(diào)用不同的webpack配置，運(yùn)行不同的webpack構(gòu)建方案。
六、render.js文件在nuxt/lib目錄下找到render.js文件，它包含著我們即將要分析的三個(gè)方法：render(), renderRoute(), renderAndGetWindow()。
通過(guò)這張圖片，我們可以知道nuxt對(duì)于處理“客戶端渲染”與“服務(wù)端渲染”的邏輯其實(shí)是非常清晰的。
首先，在render()方法在處理完一系列的路徑問(wèn)題后，會(huì)調(diào)用renderRoute()方法，獲取響應(yīng)所需內(nèi)容并完成響應(yīng)。
其中renderRoute()方法會(huì)判斷當(dāng)前響應(yīng)是否應(yīng)執(zhí)行服務(wù)端渲染。如果是，則調(diào)用vue提供的bundleRenderer()方法，把html內(nèi)容渲染完畢以后再整體輸出；如果不是，則直接輸出一個(gè)字符串，交由客戶端渲染。
最后，通過(guò)renderAndGetWindow()來(lái)檢查輸出的html是否存在問(wèn)題，然后發(fā)出通知，表明html可用。
七、generate.js文件最后我們來(lái)分析一下generate.js文件。我們知道nuxt generate指令會(huì)為page目錄下的每一個(gè)頁(yè)面文件多帶帶生成一個(gè)html靜態(tài)頁(yè)面，功能非常貼心。那么generate.js到底是怎么工作的呢？
在執(zhí)行nuxt generate時(shí)，它會(huì)先執(zhí)行前文已經(jīng)分析過(guò)的build()方法，產(chǎn)出編譯后的文件；然后會(huì)初始化dist目錄，調(diào)用resolveRouteParams()方法，讀取產(chǎn)出后的路由配置并整理。然后通過(guò)fs.writeFile()等API，把內(nèi)容挨個(gè)寫入文件并輸出，最后再統(tǒng)計(jì)總的generate()運(yùn)行時(shí)間。
八、寫在最后Nuxt是一個(gè)新誕生的項(xiàng)目，官網(wǎng)文檔也尚未全部完成。從一個(gè)使用者的角度來(lái)說(shuō)，這是一個(gè)非常有意思的項(xiàng)目，VueJS的作者尤大也曾褒獎(jiǎng)過(guò)這個(gè)項(xiàng)目，在VueJS的官網(wǎng)也專門為其進(jìn)行推薦。
如此interesting的項(xiàng)目實(shí)在很值得深入研究，作者的代碼和注釋也非常清晰詳細(xì)。本文受限于個(gè)人水平，在分析理解上難免有出錯(cuò)的地方，歡迎各位讀者指正！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81221.html
摘要：攻克了第一個(gè)困難了。因?yàn)槟愕慕巧俅巫兓?。其中每個(gè)系統(tǒng)調(diào)用都要進(jìn)行深入地學(xué)習(xí)讀文檔做實(shí)驗(yàn)。經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)，你攻克了這些東西。內(nèi)核機(jī)制是我們重點(diǎn)學(xué)習(xí)部分，基于最新的內(nèi)核。輔助學(xué)習(xí)，推薦深入理解內(nèi)核。 1 拋棄舊文化，迎接Linux命令新文化 Linux第一步，從Windows思維，切換到Linux的命令行+文件模式 在Linux中，做什么都有相應(yīng)命令。一般就在bin或者sbin目錄...
摘要：借助，我們通過(guò)非常簡(jiǎn)單的問(wèn)答形式，方便地初始化一個(gè)工程，完全不需要擔(dān)心繁復(fù)的配置等等。簡(jiǎn)單來(lái)說(shuō)，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運(yùn)行的模板，就能夠通過(guò)進(jìn)行工程的初始化。 相信對(duì)于大部分使用過(guò)VueJS的同學(xué)來(lái)說(shuō)，vue-cli是他們非常熟悉的一個(gè)工具。借助vue-cli，我們通過(guò)非常簡(jiǎn)單的問(wèn)答形式，方便地初始化一個(gè)vue工程，完全不需要...
摘要：計(jì)算機(jī)組成中的大量原理和設(shè)計(jì)，都對(duì)應(yīng)著性能這個(gè)詞。時(shí)間的倒數(shù)性能計(jì)算機(jī)的性能，其實(shí)和體力勞動(dòng)很像，好比是我們要搬東西。對(duì)于計(jì)算機(jī)的性能，我們需要有個(gè)標(biāo)準(zhǔn)來(lái)衡量。花的時(shí)間越少，自然性能就越好。 0 學(xué)習(xí)路線的知識(shí)點(diǎn)概括 showImg(https://segmentfault.com/img/remote/1460000020031616?w=3832&h=2540); 學(xué)習(xí)計(jì)算機(jī)組成原...
摘要：內(nèi)部迭代與使用迭代器顯式迭代的集合不同，流的迭代操作是在背后進(jìn)行的。流只能遍歷一次請(qǐng)注意，和迭代器類似，流只能遍歷一次。 流（Stream） 流是什么 流是Java API的新成員，它允許你以聲明性方式處理數(shù)據(jù)集合（通過(guò)查詢語(yǔ)句來(lái)表達(dá)，而不是臨時(shí)編寫一個(gè)實(shí)現(xiàn)）。就現(xiàn)在來(lái)說(shuō)，你可以把它們看成遍歷數(shù)據(jù)集的高級(jí)迭代器。此外，流還可以透明地并行處理，你無(wú)需寫任何多線程代碼了！我會(huì)在后面的筆記中...
閱讀 2021·2021-10-11 10:59
閱讀 1129·2021-09-07 09:59
閱讀 2294·2021-08-27 16:17
閱讀 2846·2019-08-30 15:54
閱讀 2330·2019-08-30 12:58
閱讀 1835·2019-08-30 12:53
閱讀 1524·2019-08-28 18:13
閱讀 795·2019-08-26 13:35
