TypeScript基础入门之模块解析(一)

TypeScript

模块解析

本节假设有关模块的一些基本知识。有关更多信息，请参阅模块文档。

模块解析是编译器用来确定导入所引用内容的过程。
考虑一个导入语句，如import { a } from "moduleA";
为了检查a的任何使用，编译器需要确切地知道它代表什么，并且需要检查它的定义moduleA。

此时，编译器将询问"moduleA的类型是什么？“虽然这听起来很简单，但是moduleA可以在您自己的.ts/.tsx文件中定义，或者在您的代码所依赖的.d.ts中定义。

首先，编译器将尝试查找表示导入模块的文件。
为此，编译器遵循两种不同策略之一：Classic或Node。
这些策略告诉编译器在哪里寻找moduleA。

如果这不起作用并且模块名称是非相对的（并且在"moduleA"的情况下，则是），则编译器将尝试查找环境模块声明。
接下来我们将介绍非相对进口。

最后，如果编译器无法解析模块，它将记录错误。
在这种情况下，错误就像error TS2307: Cannot find module 'moduleA'

相对与非相对模块导入

根据模块引用是相对引用还是非相对引用，模块导入的解析方式不同。

相对导入是以/、./或../开头的导入。
一些例子包括：

import Entry from "./components/Entry";
import { DefaultHeaders } from "../constants/http";
import "/mod";

任何其他import都被视为非亲属。
一些例子包括：

import * as $ from "jquery";
import { Component } from "@angular/core";

相对导入是相对于导入文件解析的，无法解析为环境模块声明。
您应该为自己的模块使用相对导入，这些模块可以保证在运行时保持其相对位置。

可以相对于baseUrl或通过路径映射解析非相对导入，我们将在下面介绍。
他们还可以解析为环境模块声明。
导入任何外部依赖项时，请使用非相对路径。

模块解决策略

有两种可能的模块解析策略：Node和Classic。
您可以使用--moduleResolution标志指定模块解析策略。
如果未指定，则默认为Classic for --module AMD | System | ES2015或其他Node。

Classic 策略

这曾经是TypeScript的默认解析策略。
如今，这种策略主要用于向后兼容。

将相对于导入文件解析相对导入。
因此，从源文件/root/src/folder/A.ts中的import { b } from "./moduleB"将导致以下查找：

/root/src/folder/moduleB.ts
/root/src/folder/moduleB.d.ts

但是，对于非相对模块导入，编译器会从包含导入文件的目录开始遍历目录树，尝试查找匹配的定义文件。

例如：

在源文件/root/src/folder/A.ts中对moduleB进行非相对导入(例如import { b } from "moduleB")将导致尝试以下位置来定位"moduleB"：

/root/src/folder/moduleB.ts
/root/src/folder/moduleB.d.ts
/root/src/moduleB.ts
/root/src/moduleB.d.ts
/root/moduleB.ts
/root/moduleB.d.ts
/moduleB.ts
/moduleB.d.ts

Node 策略

他的解析策略试图在运行时模仿Node.js模块解析机制。Node.js模块文档中概述了完整的Node.js解析算法。

Node.js如何解析模块

要了解TS编译器将遵循的步骤，重要的是要阐明Node.js模块。
传统上，Node.js中的导入是通过调用名为require的函数来执行的。
Node.js采取的行为将根据require是否给定相对路径或非相对路径而有所不同。

相对路径相当简单。
例如，让我们考虑位于/root/src/moduleA.js的文件，其中包含import var x = require("./ moduleB");
Node.js按以下顺序解析导入：

1. 询问名为/root/src/moduleB.js的文件（如果存在）。
2. 询问文件夹/root/src/moduleB是否包含名为package.json的文件，该文件指定了"main"模块。在我们的示例中，如果Node.js找到包含{"main": "lib/mainModule.js"}的文件/root/src/moduleB/package.json，那么Node.js将引用/root/src/moduleB/lib/mainModule.js。
3. 询问文件夹/root/src/moduleB是否包含名为index.js的文件。该文件被隐含地视为该文件夹的"main"模块。

您可以在Node.js文档中了解有关文件模块和文件夹模块的更多信息。

但是，非相对模块名称的解析以不同方式执行。
Node将在名为node_modules的特殊文件夹中查找模块。
node_modules文件夹可以与当前文件位于同一级别，或者在目录链中位于更高级别。
Node将走向目录链，查看每个node_modules，直到找到您尝试加载的模块。

按照上面的示例，考虑是否/root/src/moduleA.js使用非相对路径并且导入var x = require("moduleB");然后，Node会尝试将moduleB解析到每个位置，直到一个工作。

/root/src/node_modules/moduleB.js
/root/src/node_modules/moduleB/package.json (if it specifies a "main" property)
/root/src/node_modules/moduleB/index.js
/root/node_modules/moduleB.js
/root/node_modules/moduleB/package.json (if it specifies a "main" property)
/root/node_modules/moduleB/index.js
/node_modules/moduleB.js
/node_modules/moduleB/package.json (if it specifies a "main" property)
/node_modules/moduleB/index.js

请注意，Node.js在步骤(4)和(7)中跳过了一个目录。

您可以在Node.js文档中阅读有关从node_modules加载模块的过程的更多信息。

TypeScript如何解析模块

TypeScript将模仿Node.js运行时解析策略，以便在编译时定位模块的定义文件。
为此，TypeScript通过Node的解析逻辑覆盖TypeScript源文件扩展名(.ts、.tsx和.d.ts)。
TypeScript还将使用package.json中名为"types"的字段来镜像"main"的目的 - 编译器将使用它来查找要查询的"main"定义文件。

例如，/root/src/moduleA.ts中的import { b } from "./moduleB"等导入语句将导致尝试以下位置来定位"./moduleB"：

/root/src/moduleB.ts
/root/src/moduleB.tsx
/root/src/moduleB.d.ts
/root/src/moduleB/package.json (if it specifies a "types" property)
/root/src/moduleB/index.ts
/root/src/moduleB/index.tsx
/root/src/moduleB/index.d.ts

回想一下，Node.js查找名为moduleB.js的文件，然后查找适用的package.json，然后查找index.js。

类似地，非相对导入将遵循Node.js解析逻辑，首先查找文件，然后查找适用的文件夹。
因此，从源文件/root/src/moduleA.ts中的import { b } from "moduleB"将导致以下查找：

/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (if it specifies a "types" property)
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts
/root/node_modules/moduleB.ts
/root/node_modules/moduleB.tsx
/root/node_modules/moduleB.d.ts
/root/node_modules/moduleB/package.json (if it specifies a "types" property)
/root/node_modules/moduleB/index.ts
/root/node_modules/moduleB/index.tsx
/root/node_modules/moduleB/index.d.ts
/node_modules/moduleB.ts
/node_modules/moduleB.tsx
/node_modules/moduleB.d.ts
/node_modules/moduleB/package.json (if it specifies a "types" property)
/node_modules/moduleB/index.ts
/node_modules/moduleB/index.tsx
/node_modules/moduleB/index.d.ts