typescript在node.js下使用別名(paths)無效的問題詳解

2022-07-06 10:00:05

背景

純nodejs環境，直接使用tsc編譯nodejs。原始碼目錄是src，編譯輸出目錄為bin。程式碼結構如下：

src
- utils
  - a.ts
  - b.ts
- config
- …
bin
tsconfig.json

在其他深層次目錄參照utils或者config下的檔案時，總是要寫一長串的'../../../../'，還需要數數。這顯然是不能接受的。用過webpack開發的小夥伴們，想想別名功能，typescript這種成熟框架不可能沒有。於是百度一波，得到如下設定：

{
    "baseUrl": "./",                             
    "paths": {
      "@utils/*": [
        "src/utils/*"
      ],
      "@config/*": [
        "src/config/*"
      ],
    }
}

設定完之後，使用如下方式參照a.ts模組：

import A from '@utils/a';

發現我的vscode編輯器已經能識別這個路徑了，當我按下ctrl點選路徑的時候，也自動跳轉到了a.ts檔案。在讚歎自己純熟的技術之餘，把所有的深層次路徑都換成了如上寫法，自信回頭執行npm run start:

一臉懵逼。檢視bin目錄編譯後的js檔案，發現typescript根本沒有按照我的設定，在編譯過程中把這個路徑給優化掉。還是require('@utils/a'):

typescript不會對別名進行處理

在搗鼓了很久確定我的tsconfig設定沒有問題後，我無奈又進行了百度，發現typescript根本不會對別名進行處理，只能藉助第三方編譯工具，例如babel，webpack。

但是我一個簡單的nodejs專案，一種編譯器足矣，我為什麼需要再去使用上述編譯器？於是另一個解決方案（chao ji da ken）誕生了：

https://github.com/dividab/tsconfig-paths

另一個坑

對，就是tsconfig-paths,這個工具，我進入其github首頁，發現有1k左右的星星。看了一下外掛介紹，發現正是為了解決這個問題。使用說明也很簡單，參照官方檔案，就一句話：

哇，只要通過-r指令新增一個預處理，再執行編譯後的模組就可以解決我的問題？興沖沖的我立即npm i --save 操作一波，發現還是出現如下問題：

這次確定是是走了他的預處理了。為什麼還是不生效？？？翻看其檔案，也找不到任何有用的資訊。到這裡，大多數小夥伴估計都放棄了，但是今晚耗上了，一個別名問題居然拖了我這麼長時間，於是我開始了原始碼偵錯，找一下到底是什麼原因。

偵錯tsconfig-paths

設定vscode偵錯程式，新增執行引數：

 {
       "type": "pwa-node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "runtimeArgs": [
            "-r",
            "${workspaceFolder}/node_modules/tsconfig-paths/register"
          ],
        "program": "${workspaceFolder}\bin\index.js"
  }

偵錯原始碼，發現其核心功能就是讀取tsconfig檔案，獲取paths（別名）對映，覆寫path._resolveFilename,匹配對映，解析獲取真正的模組。嗯，倒是不復雜

我在這裡加了個條件斷點，找到了我的utils/common的模組請求，發現found為空…問題就出在這裡了。於是進一步查詢。發現其匹配規則沒問題，只是匹配到之後，尋找模組時使用的路徑居然是原始tsconfig中設定的src…

這也太不智慧了，你好歹讀一下tsconfig裡的outDir屬性吧!

現在沒辦法了，為了適配他的程式碼，只能修改tsconfig的paths設定如下：

{
    "baseUrl": "./",                             
    "paths": {
      "@utils/*": [
        "src/utils/*",
        "bin/utils/*"
      ],
      "@config/*": [
        "src/config/*",
        "bin/config/*"
      ],
    }
}

這樣他拼接的時候就能找到我的模組了，問題終於解決！

總結

到此這篇關於typescript在node.js下使用別名(paths)無效問題詳解的文章就介紹到這了,更多相關typescript在node.js使用別名無效內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

typescript在node.js下使用別名(paths)無效的問題詳解

目錄

背景

typescript不會對別名進行處理

另一個坑

偵錯tsconfig-paths

總結

熱門文章