typescript2.0 - TypeScript 导入路径别名

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

在继续之前，我想说明我正在使用 TypeScript 2.0，如果需要的话，我也不反对使用 2.1 开发版本。我只是想让它正常工作。

每个 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，但原理相同）。

这可能吗，还是我在这里误解了什么？我知道在最新版本中添加了一些新的路径映射功能，但关于如何使用它们的文档几乎没有。

答案＃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/*"]
    }
  }
}

答案＃2

如果你正在使用路径，你将需要将绝对路径改回相对路径，以便在使用 tsc 将 TypeScript 编译成普通 JavaScript 后正常工作。

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

我尝试过，但对于我复杂的设置，它并没有奏效。此外，它在运行时解析路径，这意味着在你的包大小和解析性能方面会有开销。

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

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

这个项目还比较年轻，所以如果你的设置非常复杂，可能会出现一些问题。不过它在我的设置下运行得很顺利，尽管我的设置相当复杂。

typescript2.0 - TypeScript 导入路径别名

答案＃1

答案＃2

相关文章