TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 2、《框架融合》

1、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面须要支持SEO，同时对首屏有指标性要求，目前市面上广泛使用的是Nuxt.js解决方案，在引入的同时还须要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于先后端编程，文章中介绍的工程与技术要点源码已上传至Github，有须要的朋友可自行下载：
Nuxt.js和Nest.js同构工程

复制代码

文章意在抛砖引玉，先后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库链接应用，公用模块封装等实际开发中使用到的内容。

效果预览:

如下为该系列文章入口列表:
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 1、《简介》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 2、《框架融合》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 3、《配置服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 4、《UI系统》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 5、《API服务设计》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 6、《SEO功能实现》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 7、《Vuex使用》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 9、《TypeScript》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 10、《工程化部署》

2、创建Nuxt.js工程

经过官网cli教程或者找到examples的typescript示例工程下载源码，这里选择的是后者。

3、创建Nest.js工程

使用Nest.js官网教程命令行CLI工具生成示例工程。

4、工程合并

如今，咱们有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者，以全局过滤器形式引入

  

5、启动命令设计

• 设计原则

  启动命令应该包含开发启动、生产启动、编译、代码检查几个基本命令，一般状况下代码检查命令是与各环境相组合使用的。通常的，为便于记忆，使用业内通用方案：

  命令	描述	变量
  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

  
  

最终效果是相似这个样子：

6、Prettierr设置

Prettierr是一个流行的代码格式化工具，它可以解析代码，使用自定义的规则来从新打印出格式规范的代码。 Prettier具备如下几个有优势：

• 可配置化
• 支持多种语言
• 集成多数的编辑器
• 简洁的配置项
• 使用Prettier在code review时不须要再讨论代码样式，节省了时间与精力。

在本示例工程中加入换行符、TAB等做了相应的强制性配置:

7、TsLint设置

TsLint为TypeScript提供了代码检查能力，对使用TypeScript的工程，在规范性、安全性、可靠性、可维护性等方面起到重要做用。在本示例中TsLint内容为继承自腾讯alloy团队的tslint-config-alloy默认配置，在其原有基础上做个性化配置，主要包括：

• 强制类注释
• 强制方法注释
• 强制类型声明

同时为方便你们对照，这里为每一个属性加入了中文说明。

8、抓包配置

Nest.js默认包含了Axios网络请求模块为做为其自带模块。但在对待https类型抓包时须要开启默认的功能才能抓取，即：NODE_TLS_REJECT_UNAUTHORIZED:0，因本示例工程中使用的是Charles抓包，所以须要把服务器启动端口设置为8888

• 设置https抓包

  

• 启动端口设置

  

• 效果

  

9、代码提交时检查

• pre-commit

  借助于pre-commit可使用户在使用git commit时执行本地npm script勾子，这样对团队总体协做，代码质量提升有质的做用，对于开发人员来讲，又无感知，不须要记太多的lint规则，若是是lint不经过的话，则有相应的错误提示，这里挂勾的是已定义好的npm run lint

  

• 检测效果