TypeScript 导入路径别名

本文介绍了TypeScript 导入路径别名的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am currently working on a TypeScript application which is comprised of multiple Node modules written in TypeScript, that are installed into the node_modules directory.

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

Before continuing, I would like to note that I am using TypeScript 2.0, I am not adverse to using the 2.1 dev release if need be as well. I just want to get this working.

每个 Node 模块的结构大致如下:

The structure of each Node module is something along the lines of:

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.

The dist folder is the generated source, with this path being configured using outDir inside of my tsconfig.json file. I have also configured the main property in my package.json to be dist/es2015/index.js.

需要注意的重要事项:

在我的项目中，我使用 moduleResolution 类型的 node
我使用的是 TypeScript 2.0
我不是在问如何从包中导入文件.我正在通过 Npm 安装包，然后通过 packagename/ 从使用此模块的应用程序中导入它.

In my project I am using moduleResolution type of node
I am using TypeScript 2.0
I am not asking how to import a file from within the package. I am installing the package via Npm and then importing it via packagename/ from within an application that is using this module.

现在是我的问题/问题.在从此模块导入文件时，我希望能够做到这一点:

Now comes my question/issue. Whilst importing files from this module, I would like to be able to do this:

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

但是，该文件无法解析到 dist/es2015/utils 目录.理想情况下，我希望我的导入从这个特定的 dist 文件夹而不是从根目录解析，这似乎正在发生.

However, the file cannot resolve to the dist/es2015/utils directory. Ideally I would like my imports to resolve from this specific dist folder and not from the root, which is what appears to be happening.

上述导入需要编写如下才能使其工作:

The above import needs to be written as the following to get it to work:

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

然而，每次编写 dist/es2015 并不理想，它只会让一些导入看起来很长.有没有办法可以配置我的模块以解析到 dist/es2015 目录?我不想在我的项目中放置覆盖，理想情况下每个模块都会指定文件的解析位置.

However, writing dist/es2015 each time is not ideal and it just makes some of the imports look really long. Is there a way I can configure my module to resolve to the dist/es2015 directory? I don't want to have to put in overrides inside of my project, ideally each module would specify where files are resolved from.

如果您在创建要与 Jspm 一起使用的插件/模块时仍然不确定我在 Jspm 中要问什么(如果这令人困惑，我深表歉意)，您可以在 package.json 中指定模块的代码>类似于以下内容:

If you are still unsure what I am asking (and I apologise if this is confusing) in Jspm when you create a plugin/module to be used with Jspm, you can specify inside of the package.json for the module something like the following:

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

我正在 TypeScript 中寻找与上述内容等效的内容(如果存在).映射指令，因此当最终用户运行 npm install my-cool-package 然后在他们的应用程序中尝试导入某些内容时，所有导入默认解析为 commonjs 目录(上面的 Jspm 示例使用 amd，但前提相同).

I am looking for the equivalent of the above in TypeScript (if it exists). A mapping directive, so when the end user runs npm install my-cool-package and then in their app tries to import something, all imports by default resolve to the commonjs directory (the above example for Jspm uses amd, but same premise).

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

Is this possible or am I misunderstanding something here? I know some new path mapping features were added into the latest release, but documentation on using them is almost nonexistent.

推荐答案

所以在阅读您的评论后，我意识到我误解了您的问题！如果您想从导入的包的角度控制路径，只需将 package.json 的 main 属性设置为正确表示模块对象图的文件.

So after reading your comment, I realized I misunderstood your question! If you want to control the paths from an imported package's perspective, just use set the main property of your package.json to a file that properly represents the object graph of your module.

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

如果您试图从项目的角度控制导入路径，那么您正在寻找的是 TypeScript 2 用于模块解析的新路径映射功能.你可以通过如下配置你的 tsconfig.json 来启用路径映射:

If you're attempting to control the import paths from a project's perspective, what you're looking for is TypeScript 2's new path mapping feature for module resolution. You can enable path mapping by configuring your tsconfig.json as follows:

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

然后，在您的 TypeScript 文件中，您可以像这样导入模块:

Then, in your TypeScript files, you can import the modules like this:

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

有关 TypeScript 2 中路径映射功能的更多详细信息，请参阅此 Github 问题.

For more details about the Path Mapping feature in TypeScript 2 see this Github issue.

在您的情况下，我认为以下配置应该有效:

In your case, I think the following configuration should work:

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

这篇关于TypeScript 导入路径别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！