TS模块解析策略之Node

LBJ
2,726 阅读2分钟

前言

关于TS的模块解析，通过前面几篇文章，我们了解了TS模块解析流程，以及了解了TS中的相对和非相对模块导入有什么差异，还有Classic模块解析策略

另外TS中还有一个中解析策略叫Node模块解析策略，它是一种试图在运行时模仿Node.js模块解析的策略，因此在上篇文章中我们大致了解了Node.js的模块解析过程，并且还简单总结了，如下所示：

image.png

这是为本文做一个铺垫

下面正式本文的内容：TS模块解析策略之Node

正文

我们知道，Node模块解析策略模仿Node.js运行时的解析策略来在编译阶段定位模块定义文件的模块解析的策略，但是跟Node.js会有点区别

TS的Node解析策略和Node.js的模块解析策略的区别

TS的Node解析策略和Node.js的模块解析策略的区别主要有以下两点：

  1. TS在Node逻辑的基础上增加了扩展名；例如：.ts，.tsx和.d.ts

  2. TS中，在package.json里使用字段"types"来表示类似"main"的意义

具体过程可以接着往下看

当然它也是根据路径不同，有2中解析过程：相对和非相对路径解析过程

相对路径的解析过程

借用官方的例子，在/root/src/moduleA.ts里有一个导入语句import { b } from "./moduleB"

它会按照以下流程来解析和定位模块：./moduleB

  1. /root/src/moduleB.ts
  2. /root/src/moduleB.tsx
  3. /root/src/moduleB.d.ts
  4. /root/src/moduleB/package.json (如果指定了"types"属性)
  5. /root/src/moduleB/index.ts
  6. /root/src/moduleB/index.tsx
  7. /root/src/moduleB/index.d.ts

非相对路径的解析过程

非相对的导入会遵循Node.js的解析逻辑，首先查找文件，然后是合适的文件夹

例如：在/root/src/moduleA.ts文件里有条导入语句import { b } from "moduleB"

由于它是非相对路径导入，所以它的解析过程是这样的：

  1. /root/src/node_modules/moduleB.ts
  2. /root/src/node_modules/moduleB.tsx
  3. /root/src/node_modules/moduleB.d.ts
  4. /root/src/node_modules/moduleB/package.json (如果指定了"types"属性)
  5. /root/src/node_modules/moduleB/index.ts
  6. /root/src/node_modules/moduleB/index.tsx
  7. /root/src/node_modules/moduleB/index.d.ts
  8. /root/node_modules/moduleB.ts
  9. /root/node_modules/moduleB.tsx
  10. /root/node_modules/moduleB.d.ts
  11. /root/node_modules/moduleB/package.json (如果指定了"types"属性)
  12. /root/node_modules/moduleB/index.ts
  13. /root/node_modules/moduleB/index.tsx
  14. /root/node_modules/moduleB/index.d.ts
  15. /node_modules/moduleB.ts
  16. /node_modules/moduleB.tsx
  17. /node_modules/moduleB.d.ts
  18. /node_modules/moduleB/package.json (如果指定了"types"属性)
  19. /node_modules/moduleB/index.ts
  20. /node_modules/moduleB/index.tsx
  21. /node_modules/moduleB/index.d.ts

别看以上过程这么多，其实它与Node.js中的解析流程是一样的

END

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

avatar
文章
阅读
粉丝