深入NUXT，看看一条命令行的背后到底发生了什么

Nuxt.js - Universal Vue.js Applications

随着 react 社区的 next.js 框架的发布， vue 社区也终于诞生了属于自己的前后端同构框架 nuxt.js 。在进一步的接触与使用中，发现 nuxt.js 确实极大地方便了 vue 项目的开发，其背后的逻辑也值得我们玩味。关于 nuxt 的具体的用法请查阅官方文档，本文就不一一赘述了。

本文主要研究 nuxt 的运行原理，分析它从接收一条 nuxt 指令，到完成指令背后所发生的一系列事情。

在开始本文之前，请读者 务必 亲自体验过 nuxt.js 的使用，并且具备一定的 vue.js 相关开发经验。

二、NUXT指令

通过查看 nuxt.js 工程目录下的 package.json 文件，我们可以看到下列几条指令：

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}
复制代码

结合官网的介绍，我们可以知道不同的指令对应着不同的功能：

以上几条指令，也就是本文将要分析的重点：究竟这些指令的背后， nuxt 都做了一些什么样的工作呢？

三、执行指令

打开 nuxt.js 的工程目录，进入到到 bin 目录，我们可以看到5个文件：

|__ nuxt
  |__ nuxt-build
  |__ nuxt-dev
  |__ nuxt-generate
  |__ nuxt-start
复制代码

每个文件对应着不同的指令。下面我们通过一张图来分析每一条指令的执行过程：

从上图可知，每一条指令基本都是做了这么几件事情：

1. 读取 nuxt.config.js 文件的配置；
2. 实例化 Nuxt() 类，并把上一步读取到的配置覆盖 Nuxt() 类的默认配置；
3. 执行各自具体的方法函数。

对应代码如下（节选）：

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()
复制代码

第一步读取配置以及配置的内容可以查看官网说明，下面我们将会对第二步和第三步进行深入探讨。

四、 Nuxt() 类

进入到 nuxt/lib 目录，我们可以看到如下的文件目录结构：

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

复制代码

目录当中的 nuxt.js 文件，就是我们要实例化的 Nuxt() 类的所在，让我们来看看它都包含一些什么内容，以及各自都有些什么作用：

上图中每一步都可以在具体的代码中自行浏览。在用户输入指令并实例化了 Nuxt() 类以后，实例化出来的 nuxt 对象就会执行图中打了绿色对勾的几个方法： build() , render() , renderRoute() , renderAndGetWindow() 以及 generate() 方法。

同时， Nuxt() 类也提供了一个 close() 公有方法，用于关闭其所开启的服务器。

五、 build() 方法

build() 方法对应着 nuxt/lib/build/index.js 文件，其基本构成如下：

简单来说， build() 方法在判断完运行条件后，会先初始化产出目录 .nuxt ，然后通过不同目录下的文件结构来生成一系列的配置，写入模板文件后输出到 .nuxt 目录。接下来，则会根据不同的开发环境来调用不同的webpack配置，运行不同的webpack构建方案。

六、 render.js 文件

在 nuxt/lib 目录下找到 render.js 文件，它包含着我们即将要分析的三个方法： render() , renderRoute() , renderAndGetWindow() 。

通过这张图片，我们可以知道 nuxt 对于处理“客户端渲染”与“服务端渲染”的逻辑其实是非常清晰的。

首先，在 render() 方法在处理完一系列的路径问题后，会调用 renderRoute() 方法，获取响应所需内容并完成响应。

其中 renderRoute() 方法会判断当前响应是否应执行服务端渲染。如果是，则调用 vue 提供的 bundleRenderer() 方法，把html内容渲染完毕以后再整体输出；如果不是，则直接输出一个 <div id="__nuxt"></div> 字符串，交由客户端渲染。

最后，通过 renderAndGetWindow() 来检查输出的html是否存在问题，然后发出通知，表明html可用。

七、 generate.js 文件

最后我们来分析一下 generate.js 文件。我们知道 nuxt generate 指令会为 page 目录下的每一个页面文件单独生成一个html静态页面，功能非常贴心。那么 generate.js 到底是怎么工作的呢？

在执行 nuxt generate 时，它会先执行前文已经分析过的 build() 方法，产出编译后的文件；然后会初始化 dist 目录，调用 resolveRouteParams() 方法，读取产出后的路由配置并整理。然后通过 fs.writeFile() 等API，把内容挨个写入文件并输出，最后再统计总的 generate() 运行时间。

八、写在最后

Nuxt 是一个新诞生的项目，官网文档也尚未全部完成。从一个使用者的角度来说，这是一个非常有意思的项目， VueJS 的作者尤大也曾褒奖过这个项目，在VueJS的官网也专门为其进行推荐。

如此interesting的项目实在很值得深入研究，作者的代码和注释也非常清晰详细。本文受限于个人水平，在分析理解上难免有出错的地方，欢迎各位读者指正！