轉(zhuǎn)載 # TypeScript基礎(chǔ)入門(mén)之模塊解析(一)

模塊解析

本節(jié)假設(shè)有關(guān)模塊的一些基本知識(shí)篮条。有關(guān)更多信息，請(qǐng)參閱模塊文檔。

模塊解析是編譯器用來(lái)確定導(dǎo)入所引用內(nèi)容的過(guò)程。
考慮一個(gè)導(dǎo)入語(yǔ)句，如import { a } from "moduleA";
為了檢查a的任何使用陵且，編譯器需要確切地知道它代表什么，并且需要檢查它的定義moduleA个束。

此時(shí)慕购，編譯器將詢(xún)問(wèn)"moduleA的類(lèi)型是什么？“雖然這聽(tīng)起來(lái)很簡(jiǎn)單茬底，但是moduleA可以在您自己的.ts/.tsx文件中定義沪悲，或者在您的代碼所依賴(lài)的.d.ts中定義。

首先桩警，編譯器將嘗試查找表示導(dǎo)入模塊的文件可训。
為此，編譯器遵循兩種不同策略之一：Classic或Node捶枢。
這些策略告訴編譯器在哪里尋找moduleA握截。

如果這不起作用并且模塊名稱(chēng)是非相對(duì)的（并且在"moduleA"的情況下，則是）烂叔，則編譯器將嘗試查找環(huán)境模塊聲明谨胞。
接下來(lái)我們將介紹非相對(duì)進(jìn)口。

最后蒜鸡，如果編譯器無(wú)法解析模塊胯努，它將記錄錯(cuò)誤。
在這種情況下逢防，錯(cuò)誤就像error TS2307: Cannot find module 'moduleA'

相對(duì)與非相對(duì)模塊導(dǎo)入

根據(jù)模塊引用是相對(duì)引用還是非相對(duì)引用叶沛，模塊導(dǎo)入的解析方式不同。

相對(duì)導(dǎo)入是以/忘朝、./或../開(kāi)頭的導(dǎo)入灰署。
一些例子包括：

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

任何其他import都被視為非親屬。
一些例子包括：

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

相對(duì)導(dǎo)入是相對(duì)于導(dǎo)入文件解析的，無(wú)法解析為環(huán)境模塊聲明溉箕。
您應(yīng)該為自己的模塊使用相對(duì)導(dǎo)入晦墙，這些模塊可以保證在運(yùn)行時(shí)保持其相對(duì)位置。

可以相對(duì)于baseUrl或通過(guò)路徑映射解析非相對(duì)導(dǎo)入肴茄，我們將在下面介紹晌畅。
他們還可以解析為環(huán)境模塊聲明。
導(dǎo)入任何外部依賴(lài)項(xiàng)時(shí)寡痰，請(qǐng)使用非相對(duì)路徑抗楔。

模塊解決策略

有兩種可能的模塊解析策略：Node和Classic。
您可以使用--moduleResolution標(biāo)志指定模塊解析策略氓癌。
如果未指定谓谦，則默認(rèn)為Classic for --module AMD | System | ES2015或其他Node。

Classic 策略

這曾經(jīng)是TypeScript的默認(rèn)解析策略贪婉。
如今，這種策略主要用于向后兼容卢肃。

將相對(duì)于導(dǎo)入文件解析相對(duì)導(dǎo)入疲迂。
因此，從源文件/root/src/folder/A.ts中的import { b } from "./moduleB"將導(dǎo)致以下查找：

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

但是莫湘，對(duì)于非相對(duì)模塊導(dǎo)入尤蒿，編譯器會(huì)從包含導(dǎo)入文件的目錄開(kāi)始遍歷目錄樹(shù)，嘗試查找匹配的定義文件幅垮。

例如：

在源文件/root/src/folder/A.ts中對(duì)moduleB進(jìn)行非相對(duì)導(dǎo)入(例如import { b } from "moduleB")將導(dǎo)致嘗試以下位置來(lái)定位"moduleB"：

1. /root/src/folder/moduleB.ts
2. /root/src/folder/moduleB.d.ts
3. /root/src/moduleB.ts
4. /root/src/moduleB.d.ts
5. /root/moduleB.ts
6. /root/moduleB.d.ts
7. /moduleB.ts
8. /moduleB.d.ts

Node 策略

他的解析策略試圖在運(yùn)行時(shí)模仿Node.js模塊解析機(jī)制腰池。Node.js模塊文檔中概述了完整的Node.js解析算法。

Node.js如何解析模塊

要了解TS編譯器將遵循的步驟忙芒，重要的是要闡明Node.js模塊示弓。
傳統(tǒng)上，Node.js中的導(dǎo)入是通過(guò)調(diào)用名為require的函數(shù)來(lái)執(zhí)行的呵萨。
Node.js采取的行為將根據(jù)require是否給定相對(duì)路徑或非相對(duì)路徑而有所不同奏属。

相對(duì)路徑相當(dāng)簡(jiǎn)單。
例如潮峦，讓我們考慮位于/root/src/moduleA.js的文件囱皿，其中包含import var x = require("./ moduleB");
Node.js按以下順序解析導(dǎo)入：

1. 詢(xún)問(wèn)名為/root/src/moduleB.js的文件（如果存在）。
2. 詢(xún)問(wèn)文件夾/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. 詢(xún)問(wèn)文件夾/root/src/moduleB是否包含名為index.js的文件。該文件被隱含地視為該文件夾的"main"模塊。

您可以在Node.js文檔中了解有關(guān)文件模塊和文件夾模塊的更多信息愧驱。

但是慰技，非相對(duì)模塊名稱(chēng)的解析以不同方式執(zhí)行。
Node將在名為node_modules的特殊文件夾中查找模塊组砚。
node_modules文件夾可以與當(dāng)前文件位于同一級(jí)別吻商，或者在目錄鏈中位于更高級(jí)別。
Node將走向目錄鏈糟红，查看每個(gè)node_modules艾帐，直到找到您嘗試加載的模塊。

按照上面的示例盆偿，考慮是否/root/src/moduleA.js使用非相對(duì)路徑并且導(dǎo)入var x = require("moduleB");然后柒爸，Node會(huì)嘗試將moduleB解析到每個(gè)位置，直到一個(gè)工作事扭。

• /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
  請(qǐng)注意捎稚，Node.js在步驟(4)和(7)中跳過(guò)了一個(gè)目錄。

您可以在Node.js文檔中閱讀有關(guān)從node_modules加載模塊的過(guò)程的更多信息求橄。

TypeScript如何解析模塊

TypeScript將模仿Node.js運(yùn)行時(shí)解析策略淮野，以便在編譯時(shí)定位模塊的定義文件樟插。
為此，TypeScript通過(guò)Node的解析邏輯覆蓋TypeScript源文件擴(kuò)展名(.ts、.tsx和.d.ts)色冀。
TypeScript還將使用package.json中名為"types"的字段來(lái)鏡像"main"的目的 - 編譯器將使用它來(lái)查找要查詢(xún)的"main"定義文件昆箕。

例如晰韵，/root/src/moduleA.ts中的import { b } from "./moduleB"等導(dǎo)入語(yǔ)句將導(dǎo)致嘗試以下位置來(lái)定位"./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拆内。

類(lèi)似地，非相對(duì)導(dǎo)入將遵循Node.js解析邏輯裆悄，首先查找文件矛纹，然后查找適用的文件夾。
因此光稼，從源文件/root/src/moduleA.ts中的import { b } from "moduleB"將導(dǎo)致以下查找：

• /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
  不要被這里的步驟數(shù)嚇倒 - TypeScript仍然只在步驟(8)和(15)兩次跳過(guò)目錄或南。
  這實(shí)際上并不比Node.js本身正在做的復(fù)雜。

附加模塊分辨率標(biāo)志

項(xiàng)目源布局有時(shí)與輸出的布局不匹配艾君。
通常采够，一組構(gòu)建步驟會(huì)導(dǎo)致生成最終輸出。
這些包括將.ts文件編譯為.js冰垄，以及將不同源位置的依賴(lài)項(xiàng)復(fù)制到單個(gè)輸出位置蹬癌。
最終結(jié)果是運(yùn)行時(shí)的模塊可能具有與包含其定義的源文件不同的名稱(chēng)。
或者，在編譯時(shí)逝薪，最終輸出中的模塊路徑可能與其對(duì)應(yīng)的源文件路徑不匹配隅要。

TypeScript編譯器具有一組附加標(biāo)志，用于通知編譯器預(yù)期發(fā)生在源上的轉(zhuǎn)換以生成最終輸出董济。

重要的是要注意編譯器不會(huì)執(zhí)行任何這些轉(zhuǎn)換;
它只是使用這些信息來(lái)指導(dǎo)將模塊導(dǎo)入解析到其定義文件的過(guò)程步清。

未完待續(xù)...