15，模块解析-KeepStudy

15，模块解析

#### 15.1 相对 vs. 非相对模块导入

*相对导入*是以`/`，`./`或`../`开头的。 下面是一些例子：
- `import Entry from "./components/Entry";`
- `import { DefaultHeaders } from "../constants/http";`
- `import "/mod";`

所有其它形式的导入被当作*非相对*的。 下面是一些例子：
- `import * as $ from "jQuery";`
- `import { Component } from "@angular/core";`

#### 15.2 模块解析策略
共有两种可用的模块解析策略：[Node](https://www.tsdev.cn/module-resolution.html#node)和[Classic](https://www.tsdev.cn/module-resolution.html#classic)。 你可以使用`--moduleResolution`标记指定使用哪种模块解析策略。 若未指定，那么在使用了`--module AMD | System | ES2015`时的默认值为[Classic](https://www.tsdev.cn/module-resolution.html#classic)，其它情况时则为[Node](https://www.tsdev.cn/module-resolution.html#node)。

#### 15.3 路径映射
TypeScript编译器通过使用`tsconfig.json`文件里的`"paths"`来支持这样的声明映射。 下面是一个如何指定`jquery`的`"paths"`的例子。
```json
{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // 此处映射是相对于"baseUrl"
    }
  }
}
```

请注意`"paths"`是相对于`"baseUrl"`进行解析。 如果`"baseUrl"`被设置成了除`"."`外的其它值，比如`tsconfig.json`所在的目录，那么映射必须要做相应的改变。 如果你在上例中设置了`"baseUrl": "./src"`，那么jquery应该映射到`"../node_modules/jquery/dist/jquery"`。

通过`"paths"`我们还可以指定复杂的映射，包括指定多个回退位置。 假设在一个工程配置里，有一些模块位于一处，而其它的则在另个的位置。 构建过程会将它们集中至一处。 工程结构可能如下：

```tree
projectRoot
├── folder1
│   ├── file1.ts (imports 'folder1/file2' and 'folder2/file3')
│   └── file2.ts
├── generated
│   ├── folder1
│   └── folder2
│       └── file3.ts
└── tsconfig.json
```

相应的`tsconfig.json`文件如下：

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "generated/*"
      ]
    }
  }
}
```

它告诉编译器所有匹配`"*"`（所有的值）模式的模块导入会在以下两个位置查找：

1. `"*"`： 表示名字不发生改变，所以映射为`<moduleName>` => `<baseUrl>/<moduleName>`
2. `"generated/*"`表示模块名添加了“generated”前缀，所以映射为`<moduleName>` => `<baseUrl>/generated/<moduleName>`

顶部

TypeScript中文手册

目录