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

Posted on by

背景

純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…

我的運行目錄明明在bin目錄！

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

現在沒辦法瞭，為瞭適配他的代碼，隻能修改tsconfig的paths配置如下：

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

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

總結

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

推薦閱讀：