一、前言
在实际业务开发中,会遇到这样一种需求,使用VUE的页面需要支持SEO,同时对首屏有指标性要求,目前市面上普遍使用的是Nuxt.js解决方案,在引入的同时还需要考虑与现有的全栈工程结合,本系列文章探讨的是此类全栈工程的解决方案,同时使用的是TypeScript应用于前后端编程,文章中介绍的工程与技术要点源码已上传至Github,有需要的朋友可自行下载:
Nuxt.js和Nest.js同构工程
文章意在抛砖引玉,前后端使用同一种语言TypeScript编写,示例已包含基本接口请求,数据库连接应用,公用模块封装等实际开发中使用到的内容。
效果预览:
以下为该系列文章入口列表:TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 一、《简介》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 二、《框架融合》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 三、《配置服务》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 四、《UI系统》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 五、《API服务设计》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 六、《SEO功能实现》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 七、《Vuex使用》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 八、《接入Mongo DB服务》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 九、《TypeScript》
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 十、《工程化部署》
二、建立Nuxt.js工程
通过官网cli教程或者找到examples的typescript示例工程下载源码,这里选择的是后者。
三、建立Nest.js工程
使用Nest.js官网教程命令行CLI工具生成示例工程。
四、工程合并
现在,我们有2个示例工程,下一步,要做的是融合。
1.package.json
首先建立包含两者包内容的package.json
,主要是@nestjs和@nuxtjs两个核心系列包,内容如下:
为了避免后续升级包兼容性一些问题,在非重要升级内容需要情况下,建议锁包。
2.webpack.config.js
建立wewbpack.config.js,加入以下内容,将服务端Nest.js加入打包机制,定义entry入口'./src/server/Main.ts'
,定义生产环境打包出口,处理的文件类型,主要起做用为ts-loader模块处理相应逻辑,其作用为通过webpack打包编译TypeScript。
3.nuxt.config.ts
将nuxt.config.js
改成nuxt.config.ts
,里边的内容作TypeScript语法转换,例如config类型为NuxtConfiguration
,该配置将作为Nuxt.js打包及服务生成所用到的所有配置项,包括:环境,构建方式,渲染器配置,样式,插件等。后续会有相应的章节单独讲解。
4.将Nuxt.js加入到Nest.js中
将Nuxt.js加入到Nest.js中关键点:将Nuxt.js以global filter
过滤器形式插入到Nest.js服务器中。具体做法如下:
- 建立NuxtFilter类继承自ExceptionFilter,重写catch方法,这样Nest.js服务器所有路由处理都将执行这里。
- 建立NuxtServer并使用单例模式与
@nuxt/webpack
建立关联 - 在
Main.ts
服务器入口中串联2者,以全局过滤器形式引入
五、启动命令设计
-
设计原则
启动命令应该包含开发启动、生产启动、编译、代码检查几个基本命令,通常情况下代码检查命令是与各环境相组合使用的。一般的,为便于记忆,使用业内通用方案:
命令 描述 变量 start 生产运行 NODE_ENV=production client:dev 本地开发,运行开发模式 NODE_ENV=development client:prod 本地开发,运行生产模式 NODE_ENV=production build 生产编译 无 lint 代码格式检查 无 -
开发环境
使用
webpack --config webpack.config.js
但通过NODE_ENV=development
环境变量区分
-
生产环境
使用
webpack --config webpack.config.js
但通过NODE_ENV=production
环境变量区分
-
编译
调用
nuxt build && tsc
-
lint代码检查
tslint -p tsconfig.json -c tslint.json
最终效果是类似这个样子:
六、Prettierr设置
Prettierr是一个流行的代码格式化工具,它能够解析代码,使用自定义的规则来重新打印出格式规范的代码。 Prettier具有以下几个有优点:
- 可配置化
- 支持多种语言
- 集成多数的编辑器
- 简洁的配置项
- 使用Prettier在code review时不需要再讨论代码样式,节省了时间与精力。
在本示例工程中加入换行符、TAB等作了相应的强制性配置:
七、TsLint设置
TsLint为TypeScript提供了代码检查能力,对使用TypeScript的工程,在规范性、安全性、可靠性、可维护性等方面起到重要作用。在本示例中TsLint内容为继承自腾讯alloy团队的tslint-config-alloy
默认配置,在其原有基础上作个性化配置,主要包括:
- 强制类注释
- 强制方法注释
- 强制类型声明
同时为方便大家对照,这里为每个属性加入了中文说明。
八、抓包配置
Nest.js默认包含了Axios网络请求模块为作为其自带模块。但在对待https类型抓包时需要开启默认的功能才能抓取,即:NODE_TLS_REJECT_UNAUTHORIZED:0
,因本示例工程中使用的是Charles
抓包,因此需要把服务器启动端口设置为8888
-
设置https抓包
-
启动端口设置
-
效果
九、代码提交时检查
-
pre-commit
借助于
pre-commit
可以使用户在使用git commit
时执行本地npm script勾子,这样对团队整体协作,代码质量提高有质的作用,对于开发人员来说,又无感知,不需要记太多的lint规则,如果是lint不通过的话,则有相应的错误提示,这里挂勾的是已定义好的npm run lint
-
检测效果