在TypeScript中導入本地安裝的節點模塊

Question

場景：

我正在使用TypeScript（版本> = 3）開發腳本。 我的腳本具有依賴於眾所周知的圖形庫的功能，而該圖形庫本身是用JavaScript編寫的。 我已經在我的項目中本地安裝了該庫及其TypeScript類型定義，從而將相關文件放置在“ node_modules”目錄的相應子目錄中。

我設置了項目，以將TypeScript轉換為ES6規范JavaScript。

我的主要TypeScript文件頂部有一個import語句，形式為：

import * as LIB from 'library'

其中“ library.js”是必需的庫文件，埋在“ node_modules”子目錄中的某個位置。 TypeScript編譯器具有其自身復雜的模塊解析過程，這意味着它可以查找此文件而無需相對文件路徑或文件擴展名。

如果在主“ .ts”文件上運行TypeScript編譯器，則會得到一個JavaScript文件。 因為我使用的是ES6，所以生成的JavaScript文件中的import語句與TypeScript源中的import語句相同 。 這是我的問題。

當腳本在我的本地開發服務器上運行時，腳本無法找到生成的JavaScript嘗試導入的文件，因為它試圖導入的文件位於“ node_modules”目錄內，並且導入未指向該目錄。 這樣，執行代碼時，瀏覽器控制台中會顯示Error resolving module specifier的Error resolving module specifier 。

我希望將代碼從TypeScript轉換為JavaScript（ES6），這樣當我將代碼從本地測試服務器提供給瀏覽器時，就可以解決所生成JavaScript的導入。

題：

1）這是我不正確配置TypeScript編譯器的結果嗎？

2）此行為是由“ tsconfig.json”和/或“ package.json”配置文件中的屬性直接導致還是受到其影響？

3）這實際上是一個問題，還是全部是由於我不了解應如何從Node服務器組織和提供文件而引起的？

在此先感謝您的幫助。

Answer 1

當您說要在“基於節點的服務器上”運行代碼時，錯誤消息表明您實際上是在為包含非相對導入（例如import * as LIB from 'library'的ES6模塊提供服務，該import * as LIB from 'library'到瀏覽器。 正如您建議的那樣，不支持此操作，因為瀏覽器中非相對導入的解析算法尚未標准化； 參見例如本文 。 您可能需要一個單獨的工具來將非相對導入重寫為相對導入（我對此類工具不熟悉，但會邀請其他人在其他答案中對其進行描述），或者您需要從瀏覽器本機模塊切換到非本地模塊捆綁程序或加載程序，例如Webpack，Rollup，Browserify或RequireJS，其中任何一種都應支持您的方案。

Answer 2

在撰寫本文時，似乎不使用@Matt McCutchen建議的模塊捆綁器或加載器就無法解決（通常）我的問題。 這里有一對夫婦的打字稿GitHub的頁面上的問題的討論： 1 ， 2 。

對於將來發現此問題的其他人，我以非常不滿意的方式解決了我的特定情況下的問題-完全避免使用導入，並在加載主要的依賴腳本之前將所需的庫加載到HTML腳本標記中。 這僅是可以接受的，因為我的項目有一個不會被更新的依賴項（因此，我將不必手動更改script標記中的“ src”）。

我再次強調，這在一般情況下不是令人滿意的解決方案，因此我將暫時擱置這個問題，以防有人提出更好的答案。