在一个前端项目中，如果要将现有的 CommonJS 模块转换为 ESM 模块，可以采取哪些具体步骤和工具？请说明转换过程中可能遇到的兼容性问题及解决方案。
考察说明
考查前端工程师对模块系统差异的理解以及项目迁移重构的实战能力。
回答思路
- 【回答框架 1】CommonJS 和 ESM 是两种不同的模块规范。CommonJS 使用 require 和 module.exports，同步加载，主要用于 Node.js。ESM 使用 import 和 export，异步加载，是 JavaScript 的标准模块系统，支持静态分析。转换时需先理解这些差异。
- 【回答框架 2】转换步骤通常包括：1. 将 package.json 中 type 字段设为 module，或使用 .mjs 文件扩展名；2. 将所有 require 调用改为 import 语句，module.exports 改为 export default 或命名导出；3. 处理动态 require，可使用 import() 动态导入；4. 注意 __dirname 和 __filename 在 ESM 中不可用，需通过 import.meta.url 获取。
- 【回答框架 3】在 Node.js 环境中，ESM 与 CommonJS 的互操作性较好，但浏览器环境中无法直接使用 require，需使用打包工具如 Webpack、Rollup 或 Vite。对于大型项目，可使用工具如 Babel 或 esbuild 自动转换代码，但还需处理第三方依赖的兼容性。
- 【回答框架 4】潜在问题包括：ESM 的静态导入要求顶层导入，不能在条件语句中使用（除 import()）；CommonJS 的模块可能是动态的，ESM 导入时可能只拿到默认导出，需要调整导入方式。此外，循环依赖的处理在两种规范中有所不同，ESM 更严格。
- 【关键点 1】转换核心是替换模块语法并处理环境差异，如 __dirname 替代方案。
- 【关键点 2】推荐使用构建工具或转换器自动化转换，但需关注第三方模块兼容。
- 【关键点 3】ESM 是标准，利于静态分析和 tree-shaking，但迁移需细致测试。
- 【易错点 1】盲目将所有 require 改为 import 可能导致动态导入失败，需保留 import() 处理动态加载。
- 【易错点 2】忽略 Node 内置模块的 ESM 支持差异，可能需引入 polyfill 或调整导入方式。
- 【易错点 3】循环依赖在 ESM 中表现不同，可能引发 undefined 引用，需重构以避免。