Node.js项目中tsconfig能否设置module为ES2020替代CommonJS

结论 #

完全可行，只要满足基础的Node.js版本要求即可，完全可以解决你遇到的CommonJS编译产生冗余代码的问题。

前提配置要求 #

• 你的Node.js版本 >= 14.13.0，推荐使用16.x及以上的长期支持版本，对ES2020模块特性的支持更加稳定
• 需要修改两处基础配置：
  1. 在项目根目录的package.json中新增配置项："type": "module"，告知Node.js项目下的.js文件默认按ESM规范解析
  2. 在tsconfig.json中修改对应配置：

  {
    "module": "ES2020",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true // 建议开启，兼容CommonJS模块的引入
  }
  

对应冗余代码问题的优化效果 #

切换为ES2020模块规范后，TypeScript编译时会直接保留原生的import/export语法，不会生成CommonJS模式下大量的__importDefault、__importStar之类的冗余辅助包装代码，编译产物的体积会明显缩小，可读性也更高。

切换后的注意事项 #

切换后需要遵守ESM规范的使用约束，不能再直接使用CommonJS专属的语法和全局变量：

• 相对路径引入本地模块时必须补全后缀名，例如要写import utils from './utils.js'，不能省略.js后缀
• 不能直接使用require、module、exports、__dirname、__filename等CommonJS专属全局变量：
  • 如果需要用到__filename/__dirname，可以通过以下方式转换获得：

  import { fileURLToPath } from 'url'
  import { dirname } from 'path'
  const __filename = fileURLToPath(import.meta.url)
  const __dirname = dirname(__filename)
  

  • 如果需要动态引入模块，可以用原生ESM的import()语法替代require
• 引入第三方CommonJS模块时，开启esModuleInterop后可以直接用import xxx from 'cjs-module'的方式获取默认导出，无需额外适配

内容的提问来源于stack exchange，提问作者Houcem Eddine