TypeScript導入路徑別名

Question

我目前正在開發一個TypeScript應用程序，它由多個用TypeScript編寫的Node模塊組成，安裝在node_modules目錄中。

在繼續之前，我想指出我使用的是TypeScript 2.0，如果需要的話，我也不會對使用2.1 dev版本感到不利。 我只是想讓這個工作。

每個Node模塊的結構都是這樣的：

dist/
    es2015/
        index.js
        utils/
            Calculator.js
            Calculator.d.ts
            Date.js
            Date.d.ts
            Flatpack.js
            Flatpack.d.ts
src/
    index.ts
    utils/
        Calculator.ts
        Date.ts
        Flatpack.ts

dist文件夾是生成的源，使用我的tsconfig.json文件中的outDir配置此路徑。 我還將package.json的main屬性配置為dist/es2015/index.js 。

需要注意的重要事項：

• 在我的項目中，我使用的是moduleResolution類型的node
• 我正在使用TypeScript 2.0
• 我不是問如何從包中導入文件。 我通過Npm安裝軟件包，然后通過packagename/從使用此模塊的應用程序中導入它。

現在是我的問題/問題。 從這個模塊導入文件時，我希望能夠這樣做：

import {Sin, Cos, Tan} from "common-utils/utils/Calculator";

但是，該文件無法解析到dist/es2015/utils目錄。 理想情況下，我希望我的導入能夠從這個特定的dist文件夾解析，而不是從根目錄解析，這似乎正在發生。

上面的導入需要寫成以下內容才能使其工作：

import {Sin, Cos, Tan} from "common-utils/dist/es2015/utils/Calculator";

然而，每次寫dist/es2015並不理想，只是讓一些導入看起來很長。 有沒有辦法可以配置我的模塊解析到dist/es2015目錄？ 我不想在我的項目中放入覆蓋，理想情況下，每個模塊都會指定文件的解析位置。

如果你在Jspm中創建一個與Jspm一起使用的插件/模塊時仍然不確定我在問什么（我道歉，如果這令人困惑），你可以在package.json為模塊指定如下內容：

  "jspm": {
    "registry": "npm",
    "jspmPackage": true,
    "main": "my-module",
    "format": "amd",
    "directories": {
      "dist": "dist/amd"
    },

我正在尋找TypeScript中的上述內容（如果它存在）。 一個映射指令，所以當最終用戶運行npm install my-cool-package然后在他們的應用程序中嘗試導入一些東西時，默認情況下所有導入都會解析為commonjs目錄（上面的Jspm示例使用amd，但前提是相同）。

這可能還是我在這里誤解了什么？ 我知道在最新版本中添加了一些新的路徑映射功能，但使用它們的文檔幾乎不存在。

Answer 1

所以在看完你的評論后，我意識到我誤解了你的問題！ 如果要從導入包的角度控制路徑，只需將package.json的main屬性設置為正確表示模塊對象圖的文件。

{
  "main": "common-utils/dist/es2015/index.js"
}

如果您試圖從項目的角度控制導入路徑，那么您正在尋找的是TypeScript 2的模塊分辨率的新路徑映射功能。 您可以通過配置tsconfig.json來啟用路徑映射，如下所示：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "angular2/*": ["../path/to/angular2/*"],
      "local/*": ["../path/to/local/modules/*"]
    }
  }
}

然后，在TypeScript文件中，您可以導入如下模塊：

import { bootstrap } from 'angular2/bootstrap';
import { module } from 'local/module';

有關TypeScript 2中的路徑映射功能的更多詳細信息，請參閱此Github問題 。

在您的情況下，我認為以下配置應該工作：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "common-utils/utils/*": ["./node_modules/common-utils/dist/es2015/utils/*"]
    }
  }
}

Answer 2

如果您正在使用路徑，則需要將絕對路徑更改為相對路徑，以便在使用tsc將tsc編譯為純JavaScript后將其工作。

到目前為止，最流行的解決方案是tsconfig-paths 。

我試過了，但是對於我復雜的設置它並不適用。 此外，它在運行時解析路徑，這意味着在包大小和解決性能方面的開銷。

所以，我自己寫了一個解決方案， tscpaths 。

我說它總體上更好，因為它在編譯時替換了路徑。 這意味着沒有運行時依賴性或任何性能開銷。 它使用起來非常簡單。 您只需要在package.json為構建腳本添加一行。

該項目非常年輕，如果您的設置非常復雜，可能會出現一些問題。 雖然我的設置相當復雜，但它對我的設置完美無缺。