一、介绍
随着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内容渲染完毕以后再整体输出;如果不是,则直接输出一个<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的项目实在很值得深入研究,作者的代码和注释也非常清晰详细。本文受限于个人水平,在分析理解上难免有出错的地方,欢迎各位读者指正!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。