面试题：TypeScript 多模块协同开发中的模块引用方式

Question

在TypeScript工程实现多模块协同开发时，常用的模块引用方式有哪些？请举例说明如何在不同模块间进行相互引用，并阐述不同引用方式的适用场景。

Answer 1

常用模块引用方式

1. 相对路径引用 通过相对当前文件的路径来引用其他模块。例如，假设有以下项目结构：

src/
├── moduleA/
│   └── a.ts
└── moduleB/
    └── b.ts

在 b.ts 中引用 a.ts：

// b.ts
import { someFunction } from '../moduleA/a';

适用场景：适用于同一层级或父子层级关系明确，且模块之间的相对位置比较固定的情况。常用于同一个功能模块内部不同文件间的引用。

2. 绝对路径引用 通常基于项目根目录来指定路径。在 tsconfig.json 中配置 baseUrl 后可以使用绝对路径。假设 tsconfig.json 中有如下配置：

{
    "compilerOptions": {
        "baseUrl": "./src"
    }
}

项目结构如下：

src/
├── moduleA/
│   └── a.ts
└── moduleB/
    └── b.ts

在 b.ts 中引用 a.ts：

// b.ts
import { someFunction } from 'moduleA/a';

适用场景：项目规模较大，模块层次结构复杂时，使用绝对路径引用能使模块引用关系更清晰，方便重构和维护，特别是当模块的相对位置可能发生变化时。

3. npm 包引用 引用安装在项目 node_modules 中的第三方库或模块。例如，安装了 lodash 库后：

import { debounce } from 'lodash';

适用场景：引入外部成熟的工具库、框架等，方便复用已有的代码和功能。

4. 动态导入（ES2020 动态导入提案） 通过 import() 语法动态导入模块，返回一个 Promise。

async function loadModule() {
    const module = await import('./moduleC');
    module.someFunction();
}

适用场景：适用于需要按需加载模块，比如在路由懒加载场景中，可以提高应用的初始加载性能，减少首屏加载时间。