TypeScript导入路径别名

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeScript导入路径别名相关的知识,希望对你有一定的参考价值。

我目前正在开发一个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,但前提是相同)。

这可能还是我在这里误解了什么?我知道在最新版本中添加了一些新的路径映射功能,但使用它们的文档几乎不存在。

答案

所以在看完你的评论后,我意识到我误解了你的问题!如果要从导入的包的角度控制路径,只需使用mainpackage.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中路径映射功能的更多详细信息,请参阅this Github issue

在您的情况下,我认为以下配置应该工作:

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

如果您正在使用路径,则需要将绝对路径更改回相对路径,以便在使用tsc将打字稿编译为纯javascript后将其工作。

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

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

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

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

该项目非常年轻,如果您的设置非常复杂,可能会出现一些问题。虽然我的设置相当复杂,但它对我的设置完美无缺。

以上是关于TypeScript导入路径别名的主要内容,如果未能解决你的问题,请参考以下文章

将别名 @ 导入重构为相对路径

将别名 @ 导入重构为相对路径

typescript项目配置路径别名(路径映射)

Typescript、Airbnb 和 eslint 导入/无外部依赖项(带别名)

Eslint + typescript 路径别名 - 无法解析模块的路径

Typescript 和 webpack 别名