深入NUXT，看看一條命令行的背后到底發(fā)生了什么

opengps 發(fā)布于2019-08-20 13:45 / 1921人閱讀

摘要：一介紹隨著社區(qū)的框架的發(fā)布，社區(qū)也終于誕生了屬于自己的前后端同構框架。本文主要研究的運行原理，分析它從接收一條指令，到完成指令背后所發(fā)生的一系列事情。最后，通過來檢查輸出的是否存在問題，然后發(fā)出通知，表明可用。

一、介紹

Nuxt.js - Universal Vue.js Applications

隨著react社區(qū)的next.js框架的發(fā)布，vue社區(qū)也終于誕生了屬于自己的前后端同構框架nuxt.js。在進一步的接觸與使用中，發(fā)現(xiàn)nuxt.js確實極大地方便了vue項目的開發(fā)，其背后的邏輯也值得我們玩味。關于nuxt的具體的用法請查閱官方文檔，本文就不一一贅述了。

本文主要研究nuxt的運行原理，分析它從接收一條nuxt指令，到完成指令背后所發(fā)生的一系列事情。

在開始本文之前，請讀者務必親自體驗過nuxt.js的使用，并且具備一定的vue.js相關開發(fā)經(jīng)驗。

二、NUXT指令

通過查看nuxt.js工程目錄下的package.json文件，我們可以看到下列幾條指令：

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

結合官網(wǎng)的介紹，我們可以知道不同的指令對應著不同的功能：

指令	描述
nuxt	開啟一個監(jiān)聽3000端口的服務器，同時提供hot-reloading功能
nuxt build	構建整個應用，壓縮合并JS和CSS文件（用于生產(chǎn)環(huán)境）
nuxt start	開啟一個生產(chǎn)模式的服務器（必須先運行nuxt build命令）
nuxt generate	構建整個應用，并為每一個路由生成一個靜態(tài)頁面（用于靜態(tài)服務器）

以上幾條指令，也就是本文將要分析的重點：究竟這些指令的背后，nuxt都做了一些什么樣的工作呢？

三、執(zhí)行指令

打開nuxt.js的工程目錄，進入到到bin目錄，我們可以看到5個文件：

  |__ nuxt
  |__ nuxt-build
  |__ nuxt-dev
  |__ nuxt-generate
  |__ nuxt-start

每個文件對應著不同的指令。下面我們通過一張圖來分析每一條指令的執(zhí)行過程：

從上圖可知，每一條指令基本都是做了這么幾件事情：

讀取nuxt.config.js文件的配置；

實例化Nuxt()類，并把上一步讀取到的配置覆蓋Nuxt()類的默認配置；

執(zhí)行各自具體的方法函數(shù)。

對應代碼如下（節(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)說明，下面我們將會對第二步和第三步進行深入探討。

四、Nuxt()類

進入到nuxt/lib目錄，我們可以看到如下的文件目錄結構：

  |__ app
  |__ build
    |__ index.js
    |__ webpack
  |__ generate.js
  |__ nuxt.js
  |__ render.js
  |__ server.js
  |__ utils.js
  |__ views

目錄當中的nuxt.js文件，就是我們要實例化的Nuxt()類的所在，讓我們來看看它都包含一些什么內(nèi)容，以及各自都有些什么作用：

上圖中每一步都可以在具體的代碼中自行瀏覽。在用戶輸入指令并實例化了Nuxt()類以后，實例化出來的nuxt對象就會執(zhí)行圖中打了綠色對勾的幾個方法：build(), render(), renderRoute(), renderAndGetWindow()以及generate()方法。

同時，Nuxt()類也提供了一個close()公有方法，用于關閉其所開啟的服務器。

五、build()方法

build()方法對應著nuxt/lib/build/index.js文件，其基本構成如下：

簡單來說，build()方法在判斷完運行條件后，會先初始化產(chǎn)出目錄.nuxt，然后通過不同目錄下的文件結構來生成一系列的配置，寫入模板文件后輸出到.nuxt目錄。接下來，則會根據(jù)不同的開發(fā)環(huán)境來調(diào)用不同的webpack配置，運行不同的webpack構建方案。

六、render.js文件

在nuxt/lib目錄下找到render.js文件，它包含著我們即將要分析的三個方法：render(), renderRoute(), renderAndGetWindow()。

通過這張圖片，我們可以知道nuxt對于處理“客戶端渲染”與“服務端渲染”的邏輯其實是非常清晰的。

首先，在render()方法在處理完一系列的路徑問題后，會調(diào)用renderRoute()方法，獲取響應所需內(nèi)容并完成響應。

其中renderRoute()方法會判斷當前響應是否應執(zhí)行服務端渲染。如果是，則調(diào)用vue提供的bundleRenderer()方法，把html內(nèi)容渲染完畢以后再整體輸出；如果不是，則直接輸出一個

字符串，交由客戶端渲染。

最后，通過renderAndGetWindow()來檢查輸出的html是否存在問題，然后發(fā)出通知，表明html可用。

七、generate.js文件

最后我們來分析一下generate.js文件。我們知道nuxt generate指令會為page目錄下的每一個頁面文件多帶帶生成一個html靜態(tài)頁面，功能非常貼心。那么generate.js到底是怎么工作的呢？

在執(zhí)行nuxt generate時，它會先執(zhí)行前文已經(jīng)分析過的build()方法，產(chǎn)出編譯后的文件；然后會初始化dist目錄，調(diào)用resolveRouteParams()方法，讀取產(chǎn)出后的路由配置并整理。然后通過fs.writeFile()等API，把內(nèi)容挨個寫入文件并輸出，最后再統(tǒng)計總的generate()運行時間。

八、寫在最后

Nuxt是一個新誕生的項目，官網(wǎng)文檔也尚未全部完成。從一個使用者的角度來說，這是一個非常有意思的項目，VueJS的作者尤大也曾褒獎過這個項目，在VueJS的官網(wǎng)也專門為其進行推薦。

如此interesting的項目實在很值得深入研究，作者的代碼和注釋也非常清晰詳細。本文受限于個人水平，在分析理解上難免有出錯的地方，歡迎各位讀者指正！

云服務器 GPU云服務器發(fā)生了得到的云服務器到底換了沒有美國政府：今年發(fā)生了三起針對水處理廠的勒前端到底是什么

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81221.html

Linux再學習（一）-學習路線規(guī)劃

摘要：攻克了第一個困難了。因為你的角色再次變化。其中每個系統(tǒng)調(diào)用都要進行深入地學習讀文檔做實驗。經(jīng)過一段時間的學習，你攻克了這些東西。內(nèi)核機制是我們重點學習部分，基于最新的內(nèi)核。輔助學習，推薦深入理解內(nèi)核。 1 拋棄舊文化，迎接Linux命令新文化 Linux第一步，從Windows思維，切換到Linux的命令行+文件模式在Linux中，做什么都有相應命令。一般就在bin或者sbin目錄...

hoohack 2019-08-19 10:18 評論0 收藏0
深入認識vue-cli：能做的不僅僅是初始化vue工程

摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個工程，完全不需要擔心繁復的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運行的模板，就能夠通過進行工程的初始化。相信對于大部分使用過VueJS的同學來說，vue-cli是他們非常熟悉的一個工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個vue工程，完全不需要...

AlienZHOU 2019-08-21 17:09 評論0 收藏0
重學計算機組成原理（二）- 制定學習路線，攀登“性能”之巔

摘要：計算機組成中的大量原理和設計，都對應著性能這個詞。時間的倒數(shù)性能計算機的性能，其實和體力勞動很像，好比是我們要搬東西。對于計算機的性能，我們需要有個標準來衡量。花的時間越少，自然性能就越好。 0 學習路線的知識點概括 showImg(https://segmentfault.com/img/remote/1460000020031616?w=3832&h=2540); 學習計算機組成原...

DrizzleX 2019-08-19 10:26 評論0 收藏0
《Java8實戰(zhàn)》-第四章讀書筆記（引入流Stream）

摘要：內(nèi)部迭代與使用迭代器顯式迭代的集合不同，流的迭代操作是在背后進行的。流只能遍歷一次請注意，和迭代器類似，流只能遍歷一次。流（Stream）流是什么流是Java API的新成員，它允許你以聲明性方式處理數(shù)據(jù)集合（通過查詢語句來表達，而不是臨時編寫一個實現(xiàn)）。就現(xiàn)在來說，你可以把它們看成遍歷數(shù)據(jù)集的高級迭代器。此外，流還可以透明地并行處理，你無需寫任何多線程代碼了！我會在后面的筆記中...

_ivan 2019-08-19 11:01 評論0 收藏0