tsconfig之moduleResolution详解

作用

moduleResolution:模块解析策略,是指编译器在查找导入模块内容时所遵循的流程

模块解析分析

如下代码,编辑器会采用模块解析策略 NodeClassic,去查找 moduleB 在哪里?如果最后找不到,
编译器不能解析这个模块会返回错误 error TS2307: Cannot find module 'moduleA'

import {
	b
} from "./moduleB"

模块的相对以及非相对模块导入

相对导入是以 /./../ 开头的

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

其它形式的导入被当作非相对的

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

模块解析策略

  • 共有两种可用的模块解析策略:NodeClassic
  • 可以使用 --moduleResolution 标记来指定使用哪种模块解析策略。
  • 若未指定,那么在使用了 --module AMD | System | ES2015 时的默认值为 Classic,其它情况时则为 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 文件里的 import { b } from "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 相对导入

/root/src/moduleA.js 文件里的 var x = require("./moduleB"); 会使用下面的查找流程

  • /root/src/moduleB.js
  • /root/src/moduleB 目录是否包含一个 package.json 文件,且 package.json 文件指定了一个 main 模块,如果 Node.js 发现文件 /root/src/moduleB/package.json 包含了 { "main": "lib/mainModule.js" },那么 Node.js 会引用 /root/src/moduleB/lib/mainModule.js
  • /root/src/moduleB 目录是否包含一个 index.js,这个文件会被隐式地当作那个文件夹下的 main 模块。
Node.js 非相对导入

Node 会在一个特殊的文件夹 node_modules 里查找你的模块。 node_modules 可能与当前文件在同一级目录下,或者在上层目录里。 Node 会向上级目录遍历,查找每个 node_modules 直到它找到要加载的模块。

/root/src/moduleA.js 文件里的 var x = require("moduleB"); 会使用下面的查找流程

  • /root/src/node_modules/moduleB.js

  • /root/src/node_modules/moduleB/package.json (如果指定了 main 属性)

  • /root/src/node_modules/moduleB/index.js

  • /root/node_modules/moduleB.js

  • /root/node_modules/moduleB/package.json (如果指定了 main 属性)

  • /root/node_modules/moduleB/index.js

  • /node_modules/moduleB.js

  • /node_modules/moduleB/package.json (如果指定了 main 属性)

  • /node_modules/moduleB/index.js

TypeScript 相对导入

TypeScript 是模仿 Node.js 运行时的解析策略来在编译阶段定位模块定义文件。

  • TypeScriptNode 解析逻辑基础上增加了 TypeScript 源文件的扩展名( .ts.tsx.d.ts
  • TypeScriptpackage.json 里使用字段 types 来表示类似 main 的意义 - 编译器会使用它来找到要使用的 main 定义文件

/root/src/moduleA.ts 文件里的 import { b } from "./moduleB" 会使用下面的查找流程

  • /root/src/moduleB.ts
  • /root/src/moduleB.tsx
  • /root/src/moduleB.d.ts
  • /root/src/moduleB/package.json (如果指定了 types 属性)
  • /root/src/moduleB/index.ts
  • /root/src/moduleB/index.tsx
  • /root/src/moduleB/index.d.ts
TypeScript 非相对的导入

/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 (如果指定了 types 属性)

  • /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 (如果指定了 types 属性)

  • /root/node_modules/moduleB/index.ts

  • /root/node_modules/moduleB/index.tsx

  • /root/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 (如果指定了 types 属性)

  • /root/node_modules/moduleB/index.ts

  • /root/node_modules/moduleB/index.tsx

  • /root/node_modules/moduleB/index.d.ts

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wflynn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值