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文件夹是生成的源,使用outDir我的tsconfig.json文件内部配置此路径.我还配置了main在我的财产package.json是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

所以在看完你的评论后,我意识到我误解了你的问题!如果要从导入的包的角度控制路径,只需使用将main属性设置为package.json正确表示模块对象图的文件.

{
  "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.

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

我试过了，但它对我的复杂设置不起作用。此外，它在运行时解析路径，这意味着包大小和解析性能方面的开销。

所以，我自己写了一个解决方案，tscpaths。

我会说它总体上更好，因为它在编译时替换了路径。这意味着没有运行时依赖性或任何性能开销。使用起来非常简单。你只需要在你的构建脚本中添加一行package.json。

该项目还很年轻，因此如果您的设置非常复杂，可能会出现一些问题。它对我的设置完美无缺，尽管我的设置相当复杂。