TypeScript导入路径别名

Question

我目前正在开发一个TypeScript应用程序，该应用程序由用TypeScript编写的多个节点模块组成，这些模块安装在node_modules目录中。

在继续之前，我想指出，我使用的是TypeScript 2.0，如果需要的话，我也不反对使用2.1dev版本。我只想把这事做好。

每个节点模块的结构大致如下：

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文件中配置此路径。我还将package.json中的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

所以在读了你的评论后，我意识到我误解了你的问题！如果希望从导入包的角度控制路径，只需将package.json的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中的路径映射功能的详细信息，请参阅这个吉特布问题。

在您的情况下，我认为以下配置应该可以工作：

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

Answer 2

如果使用的是路径，则需要将绝对路径更改为相对路径，以便在使用tsc将类型记录编译为普通javascript后工作。

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

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

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

我想说总体上它更好，因为它在编译时替换路径。这意味着不存在运行时依赖关系或任何性能开销。它使用起来很简单。只需在package.json中为构建脚本添加一行即可。

这个项目非常年轻，所以如果您的设置非常复杂，可能会出现一些问题。虽然我的设置相当复杂，但它对我的设置来说是完美无缺的。