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

  

• 檢測效果