typescript 支持與本地調(diào)試配置詳解

更新時間：2023年09月05日 15:18:11 作者：ice_breaker

這篇文章主要為大家介紹了typescript 支持與本地調(diào)試配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

typescript 支持與本地調(diào)試

在上一章節(jié)，我們創(chuàng)建了一個 hello world 函數(shù)，并把它順利的部署到了AWS云上。然而真正上生產(chǎn)的函數(shù)項目肯定不會這么簡單。

對于一個現(xiàn)代的 nodejs 項目來說，我們還有許多的需求：

比如我們也更想使用 typescript 來進行開發(fā)，還有我們也需要在本地搭建一套完整的模擬環(huán)境，來對我們編寫的代碼進行調(diào)試和測試。

比如我們要添加對應(yīng)的單元測試和 CI/CD

又或者是我們的函數(shù)里面，各種第三方的依賴項的處理，js 相關(guān)的還好，但是其他那些和平臺綁定的 二進制文件，又或者是內(nèi)置的 .xdb 等等一些數(shù)據(jù)文件，應(yīng)該如何處理呢？請聽我娓娓道來.

支持 typescript

我們想要用 ts 來編寫函數(shù)進行調(diào)試和部署，幸運的是 serverless 為我們提供了開箱即用的插件：

serverless-plugin-typescript, 這是由 serverless 官方維護的 ts 支持方案，推薦使用
serverless-esbuild，這是第三方編寫的，使用 esbuild 去編譯 ts 代碼的方案

當然，除了插件方案之外，當然也有非 serverless 插件的傳統(tǒng)打包方案，即直接使用 tsc 或者 webpack/rollup/esbuild 又或者進一步封裝的 tsup/unbuild 等等這些工具，直接構(gòu)建出 dist 產(chǎn)物，然后 sls deploy 直接部署 dist 里代碼文件的方案。

這個傳統(tǒng)打包方案，我們下一篇文章《serverless nodejs 項目打包最佳實踐》會詳細介紹。

這些插件的用法非常簡單，我們只需要在安裝它們之后，再把它們注冊進你的 serverless.yml 文件中就可以了。

比如 serverless-plugin-typescript, 我們先安裝 npm i -D serverless-plugin-typescript

然后在 serverless.yml 中注冊:

# 注冊插件，傳入一個數(shù)組
plugins:
  - serverless-plugin-typescript
# 插件傳入的 options 都在這個字段下
custom:
  # 可以不傳值，不傳默認值見 https://www.npmjs.com/package/serverless-plugin-typescript
  serverlessPluginTypescript:
    tsConfigFileLocation: "./tsconfig.build.json"

接下來執(zhí)行 sls packge 命令(sls deploy的前置打包成壓縮包步驟)，插件就會自己去找當前目錄下的 tsconfig.build.json（上面tsConfigFileLocation指定的路徑）配置，去編譯 ts 代碼，然后打入將被上傳的壓縮包里。

打包后，你可以在你配置的 tsconfig 里 outDir 目錄下，找到編譯生成的結(jié)果，并進行校驗。

函數(shù)的本地調(diào)試

我們本地環(huán)境，去調(diào)試編寫的云函數(shù)，比較方便的做法，主要有 2 種：

一種為執(zhí)行 sls invoke local -f <function name> -d/-p ... 進行直接調(diào)試
另外一種為通過 serverless-offline 插件，在本地構(gòu)建出模擬的 lambda 和 api網(wǎng)關(guān)環(huán)境 進行調(diào)試，顯然這種調(diào)試方式非常適合 web 服務(wù)。

注意，因為整個項目是 typescript 編寫的，而實際運行卻是 js 文件，所以你編譯時，必須打開 sourcemap 選項才能命中到 ts源碼里的斷點，不然只能把斷點命中到 .build/.esbuild 里 js 產(chǎn)物的代碼。

啟用 node-terminal 調(diào)試

這個方式很簡單，因為 node-terminal 開箱即用的，

一種方法，我們直接在 vscode 下方的終端窗口，點擊加號旁邊的下拉icon，添加 JavaScript 調(diào)試終端，然后再cd到目標目錄中，執(zhí)行對應(yīng)的調(diào)試 npm script 即可。
另外一種方法是利用 .vscode/launch.json 去維護我們的調(diào)試腳本，同時在 vscode debug 界面進行調(diào)試。

配置類似于下方：

{
  "version": "0.2.0",
  "configurations": [
    {
      "command": "npm run invoke:local",
      "name": "[hello-world] invoke local",
      "request": "launch",
      "type": "node-terminal",
      "cwd": "${workspaceFolder}/apps/hello-world"
    },
    {
      "command": "npm run offline",
      "name": "[hello-world] offline",
      "request": "launch",
      "type": "node-terminal",
      "cwd": "${workspaceFolder}/apps/hello-world"
    }
  ]
}

下方章節(jié)的 invoke local 和 serverless-offline 都直接使用上述的 vscode 配置示例進行調(diào)試。

invoke local

sls invoke local -f <function name> -d/-p ... 這個命令是直接調(diào)用本地函數(shù)進行調(diào)試.

其中 function name 是函數(shù)名，也就是我們在 serverless.yml 中注冊的名字。

后面加的 -d/-p 用來控制傳入的 event 對象。

-d 是 --data 的縮寫，代表直接把跟在后面的字符串作為 json 傳入函數(shù)進行調(diào)用。

而 -p(--path的縮寫)其實功能類似，不過 -p 是傳入一個 json 文件的路徑作為參數(shù)，讀取之后傳入函數(shù)進行調(diào)用，所以我更推薦使用 -p。

serverless-offline

serverless-offline 插件是在本地模擬出一個 lambda 和 API Gateway 的環(huán)境進行部署，再起一個 http server 監(jiān)聽端口，這樣來進行調(diào)試。

這種調(diào)試方法，其實和我們調(diào)試 express/koa 項目是非常類似的。不同的是，我們的路由不在我們的代碼里進行注冊，而在于 serverless.yml 里函數(shù)對應(yīng)網(wǎng)關(guān)的配置。

serverless-offline 插件注冊也非常的簡單:

# 注冊插件
plugins:
  - serverless-offline
custom:
# 修改配置項
  serverless-offline:
    noPrependStageInUrl: true
    noAuth: true

注冊完成之后，使用 sls offline 命令，即可啟動，看到:

Offline [http for lambda] listening on http://localhost:3000
Function names exposed for local invocation by aws-sdk:
           * hello: aws-http-api-ts-dev-hello
   ┌─────────────────────────────────────────────────────────────────────────┐
   │                                                                         │
   │   GET | http://localhost:3000/                                          │
   │   POST | http://localhost:3000/2015-03-31/functions/hello/invocations   │
   │                                                                         │
   └─────────────────────────────────────────────────────────────────────────┘
Server ready: http://localhost:3000 ??

出現(xiàn)上述結(jié)果，代表已經(jīng)啟動完成，此時它的調(diào)試也只需要像我們調(diào)試 express/koa/nest 那樣，直接在 vscode 里打斷點，即可命中。