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的{{1}}属性设置为正确表示模块对象图的文件。

package.json

如果您尝试从项目的角度控制导入路径，那么您正在寻找的是TypeScript 2的新路径映射功能，以便进行模块解析。您可以通过配置{ "main": "common-utils/dist/es2015/index.js" }来启用路径映射，如下所示：

tsconfig.json

然后，在TypeScript文件中，您可以导入如下模块：

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

有关TypeScript 2中路径映射功能的更多详细信息，请参阅this Github issue。

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

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

Answer 2

如果您使用的是路径，则需要使用tsc将打字稿编译为纯JavaScript后，才能将绝对路径改回相对路径，以使其正常工作。

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

我已经尝试过了，但是对于我的复杂设置来说，它不起作用。而且，它可以在运行时解析路径，这意味着在程序包大小和性能方面的开销。

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

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

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

TypeScript导入路径别名

2 个答案: