TS中的相对和非相对模块导入

1,004 阅读2分钟

前言

在之前的文章中,我们了解了TS模块解析

本篇文章跟它相关,所以我们来回顾一下模块解析的大致流程:

  1. 首先,编译器会根据ClassicNode解析策略,去到对应的地方查找模块
  2. 如果上面解析失败,并且模块名是非相对的,那编译器会尝试定位一个外部模块声明
  3. 如果还是不能解析,则会记录错误

其中第二步中提到了:模块名是非相对的

这也是本文的主题,什么是相对、什么是非相对模块,它们又什么不同

相对和非相对模块导入

其实,相对和非相对模块导入主要有以下两点不同

1. 形式不同

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

非相对导入正好相反,除了以/./../开头的其他形式都被称为非相对

官方例子如下:

// 相对的
-   `import Entry from "./components/Entry";`
-   `import { DefaultHeaders } from "../constants/http";`
-   `import "/mod";`
//非相对的
-   `import * as $ from "jQuery";`
-   `import { Component } from "@angular/core";`

2. 解析方式不同

TS的编译器,会根据模块引用是相对的还是非相对的,模块导入会以不同的方式解析

相对导入(以/./../开头的)在解析时是相对于导入它的文件,并且不能解析为一个外部模块声明

非相对模块的导入可以相对于baseUrl或通过下文会讲到的路径映射来进行解析。 它们还可以被解析成外部模块声明

脑图

为了方便,最终小结为一图,如下所示:

END

关于文章中提到了两种解析策略(ClassicNode),你可能还不太了解!没关系,下篇文章会详细说说这两种策略,欢迎继续阅读~

以上就是本文的所有内容,如有问题,欢迎指正~