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

James_Liauw_左下
6,535 阅读5分钟

1567861669077.jpg

一、前言

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

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

效果预览:

Nuxt.js与Nest.js同构工程
以下为该系列文章入口列表:
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

  • 检测效果

avatar
文章
阅读
粉丝