插件窝 干货文章 typescript模块解析

typescript模块解析

strong 模块 解析 typescript 833    来源:    2024-10-19
模块解析是 typescript 编译器连接模块的过程,它根据文件扩展名、导入路径、模块类型和解析器解析模块。commonjs、amd 和 es6 等模块类型的解析规则不同,默认导出和命名导出也是解析的一部分。如果找不到模块,typescript 将优先查找相对路径、node_modules 文件夹和包管理器路径。

TypeScript 模块解析

模块解析是什么?

模块解析是 TypeScript 编译器确定模块文件如何在应用程序中相互连接的过程。它涉及解析导入语句并确定要包含的文件。

如何解析模块?

TypeScript 编译器根据以下规则解析模块:

  1. 文件扩展名: .ts 文件被视为 TypeScript 模块,而 .js 文件被视为 JavaScript 模块。
  2. 导入路径: 导入语句中的路径相对于源文件或配置文件中指定的路径。
  3. 模块类型: TypeScript 支持多种模块类型,包括 CommonJS、AMD 和 ES6。
  4. 模块解析器: TypeScript 编译器使用模块解析器(如 ts.resolveModuleName 函数)来解析模块。

不同模块类型的解析

  • CommonJS: 导入语句使用 require() 函数,例如 import * as fs from 'fs';
  • AMD: 导入语句使用 define() 和 require() 函数,例如 import * as $ from 'jquery';
  • ES6: 导入语句使用 import 和 export 关键字,例如 import { Component } from './component';;

默认导出和命名导出

  • 默认导出: 模块可以导出一个默认值,可以使用 export default 语法。例如:export default function greet(name) { return 'Hello ' + name; };
  • 命名导出: 模块可以导出多个命名值,可以使用 export 语法。例如:export class Person { name: string; age: number; };

解析优先级

如果找不到导入的模块,TypeScript 将按照以下优先级查找:

  1. 相对路径
  2. node_modules 文件夹
  3. 包管理器(如 npm)指定的路径

使用模块解析器

TypeScript 编译器提供了 ts.resolveModuleName 函数,用于手动解析模块。此函数返回一个 ResolvedModule 对象,其中包含解析的模块的路径和模块类型。