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

opengps 发布于2019-08-20 13:45 / 1766人阅读

摘要：一介绍随着社区的框架的发布，社区也终于诞生了属于自己的前后端同构框架。本文主要研究的运行原理，分析它从接收一条指令，到完成指令背后所发生的一系列事情。最后，通过来检查输出的是否存在问题，然后发出通知，表明可用。

一、介绍

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	开启一个监听3000端口的服务器，同时提供hot-reloading功能
nuxt build	构建整个应用，压缩合并JS和CSS文件（用于生产环境）
nuxt start	开启一个生产模式的服务器（必须先运行nuxt build命令）
nuxt generate	构建整个应用，并为每一个路由生成一个静态页面（用于静态服务器）

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

三、执行指令

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

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

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

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

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

实例化Nuxt()类，并把上一步读取到的配置覆盖Nuxt()类的默认配置；

执行各自具体的方法函数。

对应代码如下（节选）：

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内容渲染完毕以后再整体输出；如果不是，则直接输出一个

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

最后，通过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的项目实在很值得深入研究，作者的代码和注释也非常清晰详细。本文受限于个人水平，在分析理解上难免有出错的地方，欢迎各位读者指正！

专线服务超融合服务器发生了得到的云服务器到底换了没有美国政府：今年发生了三起针对水处理厂的勒前端到底是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81221.html

Linux再学习（一）-学习路线规划

摘要：攻克了第一个困难了。因为你的角色再次变化。其中每个系统调用都要进行深入地学习读文档做实验。经过一段时间的学习，你攻克了这些东西。内核机制是我们重点学习部分，基于最新的内核。辅助学习，推荐深入理解内核。 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
重学计算机组成原理（二）- 制定学习路线，攀登“性能”之巅

摘要：计算机组成中的大量原理和设计，都对应着性能这个词。时间的倒数性能计算机的性能，其实和体力劳动很像，好比是我们要搬东西。对于计算机的性能，我们需要有个标准来衡量。花的时间越少，自然性能就越好。 0 学习路线的知识点概括 showImg(https://segmentfault.com/img/remote/1460000020031616?w=3832&h=2540); 学习计算机组成原...

DrizzleX 2019-08-19 10:26 评论0 收藏0
MySQL实战 | 01 当执行一条 select 语句时，MySQL 到底做了啥？

摘要：原文链接当执行一条语句时，到底做了啥也许，你也跟我一样，在遇到数据库问题时，总时茫然失措，想重启解决问题，又怕导致数据丢失，更怕重启失败，影响业务。数据库连接池另外，不少实际的应用框架中，大都使用连接池来维护连接数。原文链接：当执行一条 select 语句时，MySQL 到底做了啥？也许，你也跟我一样，在遇到数据库问题时，总时茫然失措，想重启解决问题，又怕导致数据丢失，更怕重启失败...

felix0913 2019-08-01 10:13 评论0 收藏0
《Java8实战》-第四章读书笔记（引入流Stream）

摘要：内部迭代与使用迭代器显式迭代的集合不同，流的迭代操作是在背后进行的。流只能遍历一次请注意，和迭代器类似，流只能遍历一次。流（Stream）流是什么流是Java API的新成员，它允许你以声明性方式处理数据集合（通过查询语句来表达，而不是临时编写一个实现）。就现在来说，你可以把它们看成遍历数据集的高级迭代器。此外，流还可以透明地并行处理，你无需写任何多线程代码了！我会在后面的笔记中...

_ivan 2019-08-19 11:01 评论0 收藏0