如何用TypeScript同时输出ES6(*.es.js)与ES5(*.js)文件？

嘿，这个问题我刚好折腾过，来给你捋捋清楚～

TypeScript本身不支持单条tsc命令直接生成两种不同模块格式/目标版本的文件，但可以通过一些配置技巧，用一条命令完成两次编译的逻辑（本质还是执行两次编译，但不用手动写两条独立命令）。

我推荐两种实用的方案，看你的项目需求选：

方案1：多配置文件+合并命令 #

这是最直接的方式，适合小型项目：

1. 先创建两个独立的TypeScript配置文件：
   • tsconfig.esm.json：用来生成ESModule格式的文件

     {
       "compilerOptions": {
         "target": "ES6",
         "module": "ESNext",
         "outFile": "./index.es.js",
         "strict": true
       },
       "include": ["src/**/*"]
     }
     

   • tsconfig.cjs.json：用来生成向后兼容的CommonJS格式文件

     {
       "compilerOptions": {
         "target": "ES5",
         "module": "CommonJS",
         "outFile": "./index.js",
         "strict": true
       },
       "include": ["src/**/*"]
     }
     

2. 然后用一条命令同时编译两个配置：

   tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json
   

   要是想更省心，直接把这条命令放到package.json的scripts里：

   {
     "scripts": {
       "build": "tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json"
     }
   }
   

   之后只需要跑npm run build就能一键完成编译了。

方案2：TypeScript复合项目（更优雅） #

如果你的项目结构比较复杂，或者需要增量编译提升速度，推荐用这个方案：

1. 根目录创建tsconfig.json，用来管理多个子配置：

   {
     "files": [],
     "references": [
       { "path": "./tsconfig.esm.json" },
       { "path": "./tsconfig.cjs.json" }
     ]
   }
   

2. 然后按方案1的内容创建tsconfig.esm.json和tsconfig.cjs.json（可以根据需求调整outDir替代outFile，比如输出到dist/esm和dist/cjs目录）
3. 最后只需要运行这条命令，就能一次性编译所有引用的配置：

   tsc --build
   

   简写是tsc -b，它支持增量编译，第二次编译会快很多，而且能自动处理配置间的依赖。

小补充 #

如果用outDir输出到不同目录，记得在package.json里指定入口字段，方便打包工具自动识别：

{
  "main": "./dist/cjs/index.js", // CommonJS入口
  "module": "./dist/esm/index.es.js" // ESModule入口
}

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