作用

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

模块解析分析

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

import {b
} from "./moduleB"

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

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

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

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

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

模块解析策略

共有两种可用的模块解析策略：Node 和 Classic。
可以使用 --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 运行时的解析策略来在编译阶段定位模块定义文件。

TypeScript 在 Node 解析逻辑基础上增加了 TypeScript 源文件的扩展名（ .ts，.tsx 和 .d.ts）
TypeScript 在 package.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

tsconfig之moduleResolution详解相关推荐

tsconfig 配置文件各字段详解
tsconfig 配置文件各字段详解 files 需要解析的ts的文件. {"files": ["./index.ts"] } 当找不到对应的文件时会报错. e ...
详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...
Angular目录结构分析以及app.module.ts详解
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
angular 标准目录结构_Angular-cli新建项目目录结构详解
Angular-cli新建项目目录结构详解在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文 ...
vscode中setting.json配置详解
vscode中的setting.json配置文件配置详解话不多说上配置文件大家按需复制到自己的setting.json配置文件中即可 [{// 控制是否在编辑器中显示 CodeLens." ...
前端后台以及游戏中使用Google Protocol Buffer详解
前端后台以及游戏中使用Google Protocol Buffer详解前端后台以及游戏中使用Google Protocol Buffer详解 0.什么是protoBuf 1.下载protobuf的编 ...
protobuf前后端解析_前端后台以及游戏中使用google-protobuf详解
前端后台以及游戏中使用google-protobuf详解 [TOC] 0.什么是protoBuf protoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,与XML相比,protoBuf更小 ...
前端修仙路-Babel 7.x 详解
前端修仙路-Babel 7.x 详解前言:Babel 是一个 JavaScript 编译器,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便 ...
Type-Script使用详解
typescript 用法详解 javascript 的痛点弱类型变量的数据类型不是固定的,我们可以给一个变量赋值多种不同类型的值. 这样可能代码编写时会更加简单,但当项目变大时,可能会给项目带来 ...

tsconfig之moduleResolution详解

作用