深入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 开启一个监听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

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

图片描述

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

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


Jrain-前端玩具盆
记录一路以来的各种折腾。

Hiphop dancer,

12.9k 声望
11.6k 粉丝
0 条评论
推荐阅读
浅谈组件库和 SVG 图标库的解耦维护思路
任何的前端组件库,无论是业界内有名的 tdesign,ant-design 还是 element-ui 也好,它们都有着自己的一系列图标。经过观察发现,这些图标都是在组件库发布的时候就已经基本稳定了,鲜有调整,所以可以一直存放于...

jrainlau1阅读 1.7k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

Hiphop dancer,

12.9k 声望
11.6k 粉丝
宣传栏