如何将TypeScript项目编译为无system/amd开销的单个JS文件

不要使用tsc --outFile实现该需求，该参数设计上仅支持AMD、System模块规范，必然会引入对应模块加载器的运行时依赖，无法直接在浏览器原生环境运行。以下是两种简洁可用的方案，产物均无额外加载器代码，支持代码压缩：

• 首选零配置方案：esbuild
  该工具构建速度极快，不需要写复杂的构建配置，单条命令即可完成打包压缩：

  1. 先调整tsconfig.json的编译配置，将module字段设置为esnext或es2020，不要保留amd、system、commonjs配置
  2. 执行打包命令：

  esbuild ./src/入口文件.ts --bundle --outfile=./dist/bundle.js --minify --target=es2020 --format=iife
  

  参数说明：

  • --bundle：自动递归解析所有导入的TS/JS依赖，合并为单文件
  • --minify：开启代码压缩、变量名混淆，减小产物体积
  • --format=iife：将代码包裹在立即执行函数中输出，无任何额外模块加载器代码，不会污染全局作用域，浏览器通过<script>标签引入即可直接运行
  • 需要调试时可追加--sourcemap参数生成源码映射文件

  日常使用可直接把命令写到package.json的脚本配置里：

  {
    "scripts": {
      "build": "esbuild ./src/入口文件.ts --bundle --outfile=./dist/bundle.js --minify --target=es2020 --format=iife"
    }
  }
  

  后续执行npm run build即可一键生成产物。

• 备选方案：tsc + Rollup
  如果需要更灵活的构建流程控制，可以用两步构建：

  1. 配置tsconfig，将TS文件编译为ES模块格式的临时JS文件，输出到临时目录
  2. 用Rollup把临时目录的ES模块打包为IIFE格式的单文件，开启压缩输出最终产物
     该方案需要安装Rollup及对应TS、压缩插件，配置成本比esbuild高，无特殊构建需求优先选esbuild即可。

注意：网上部分教程提到的修改tsc输出手动删模块加载代码的方案存在兼容隐患，遇到跨文件常量、复杂导入导出场景很容易出现运行时错误，不建议使用。

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