模块解析策略是 TypeScript 编译配置中的核心环节，它决定了编译器如何定位和加载导入的模块文件。TypeScript 提供了三种主要的模块解析模式，分别针对不同的运行环境和开发场景，理解这些模式的差异对于确保项目导入逻辑的正确性至关重要。

三种解析模式的核心差异

TypeScript 的模块解析行为由 tsconfig.json 中的 moduleResolution 选项控制，目前主要支持 node、node16 和 bundler 三种模式，它们在查找逻辑、扩展名处理和适用场景上存在显著区别：

关键区别总结：node 模式是历史兼容方案，node16 强调规范严谨性，bundler 则聚焦开发效率，通过简化导入路径提升前端项目的开发体验。

模式选择依据与最佳实践

不同解析模式的设计目标对应不同的开发场景，选择时需结合项目类型和部署环境：

• 前端工程化项目（如 React/Vue 应用）：优先使用 bundler 模式。该模式允许省略 .ts、.tsx、.js 等扩展名，支持目录导入（自动查找 index.ts），与 Vite、Webpack 等打包工具的行为完全一致。例如导入组件时，可直接写 import './components/Button'，无需指定 ./components/Button.tsx，大幅简化路径书写。

• npm 库开发或 Node.js 原生应用：必须使用 node16 模式。该模式严格遵循 Node.js 官方模块规范，确保库文件在不同环境下的导入行为一致。例如开发 ESM 格式的 npm 包时，必须为所有相对导入添加完整扩展名（如 import './utils.mjs'），避免在生产环境中出现模块查找失败。

注意：若前端项目误用 node16 模式，会因强制要求扩展名导致大量导入报错；若 npm 库使用 bundler 模式，则可能因路径解析差异导致用户安装后无法正常导入。

实战案例：Vite + TypeScript 配置 bundler 模式

以下通过 Vite 项目演示 bundler 模式的配置与使用效果，实现导入路径简化：

1. 初始化项目：

   bash

   复制代码

   npm create vite@latest my-vue-ts-app -- --template vue-ts
   cd my-vue-ts-app
   npm install

2. 配置 tsconfig.json：
   确保 moduleResolution 设置为 bundler，并开启 resolveJsonModule 支持 JSON 导入：

   json

   复制代码

   {
     "compilerOptions": {
       "moduleResolution": "bundler", // 启用 bundler 解析模式
       "resolveJsonModule": true,
       "target": "ES2020",
       "useDefineForClassFields": true,
       "module": "ESNext",
       "lib": [[2](ES2020)][[3](DOM)][[4](DOM.Iterable)],
       "skipLibCheck": true,
       "strict": true,
       "jsx": "preserve",
       "sourceMap": true,
       "isolatedModules": true,
       "esModuleInterop": true,
       "forceConsistentCasingInFileNames": true
     },
     "include": [[5](src/**/*.ts)][[6](src/**/*.d.ts)][[7](src/**/*.tsx)][[8](src/**/*.vue)],
     "references": [{ "path": "./tsconfig.node.json" }]
   }

3. 简化组件导入：
   在 src/components 目录下创建 Button.tsx：

   tsx

   复制代码

   // src/components/Button.tsx
   export default function Button() {
     return <button className="btn">Click me</button>;
   }

   在 App.tsx 中直接导入，无需指定 .tsx 扩展名：

   tsx

   复制代码

   // src/App.tsx
   import Button from './components/Button'; // 简化路径，省略 .tsx
   
   function App() {
     return (
       <div>
         <Button />
       </div>
     );
   }
   
   export default App;

4. 运行验证：
   执行 npm run dev，Vite 会正常解析 ./components/Button 路径，页面正确渲染按钮组件。

练习：判断不同模式下的导入合法性

通过以下场景练习，加深对解析模式差异的理解：

1. 场景一：在 node 模式下，import './utils' 是否合法？
   答案：合法。node 模式会依次查找 utils.js、utils.json、utils/index.js。

2. 场景二：在 node16 模式的 ESM 文件中，import './api' 是否合法？
   答案：不合法。ESM 必须指定完整扩展名，需改为 import './api.mjs' 或 import './api.js'。

3. 场景三：在 bundler 模式下，import './styles/theme' 能否解析 theme.scss 文件？
   答案：取决于打包工具配置。若 Vite 配置了 SCSS 预处理器，可通过 vite.config.ts 中的 resolve.extensions 添加 .scss，实现无扩展名导入。

通过上述练习可以看出，模块解析模式直接影响导入路径的写法，正确配置 moduleResolution 是确保项目稳定性的关键步骤。在实际开发中，建议根据项目类型（前端应用/库开发）选择对应模式，并通过 tsconfig.json 明确声明，避免因环境差异导致的解析错误。