快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

支持 typescript

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

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

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

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

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

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

然后在 serverless.yml 中注冊(cè):

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

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

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

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

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

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

注意，因?yàn)檎麄€(gè)項(xiàng)目是 typescript 編寫的，而實(shí)際運(yùn)行卻是 js 文件，所以你編譯時(shí)，必須打開 sourcemap 選項(xiàng)才能命中到 ts源碼里的斷點(diǎn)，不然只能把斷點(diǎn)命中到 .build/.esbuild 里 js 產(chǎn)物的代碼。

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

這個(gè)方式很簡(jiǎn)單，因?yàn)?nbsp;node-terminal 開箱即用的，

一種方法，我們直接在 vscode 下方的終端窗口，點(diǎn)擊加號(hào)旁邊的下拉icon，添加 JavaScript 調(diào)試終端，然后再cd到目標(biāo)目錄中，執(zhí)行對(duì)應(yīng)的調(diào)試 npm script 即可。
另外一種方法是利用 .vscode/launch.json 去維護(hù)我們的調(diào)試腳本，同時(shí)在 vscode debug 界面進(jìn)行調(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 配置示例進(jìn)行調(diào)試。

invoke local

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

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

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

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

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

serverless-offline

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

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

serverless-offline 插件注冊(cè)也非常的簡(jiǎn)單:

# 注冊(cè)插件
plugins:
  - serverless-offline
custom:
# 修改配置項(xiàng)
  serverless-offline:
    noPrependStageInUrl: true
    noAuth: true

注冊(cè)完成之后，使用 sls offline 命令，即可啟動(dòng)，看到:

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)啟動(dòng)完成，此時(shí)它的調(diào)試也只需要像我們調(diào)試 express/koa/nest 那樣，直接在 vscode 里打斷點(diǎn)，即可命中。