TypeScript Compiler API是否不支持打包？求浏览器端解决方案

关于TypeScript Compiler API的打包能力 #

TypeScript Compiler API确实不支持打包功能。它的核心定位是完成TS到JS的编译转换，包括类型检查、语法降级、模块语法转换（比如把ES模块转成CommonJS），但不会处理模块依赖的合并、代码压缩、树摇（Tree Shaking）这些打包工具的核心工作。如果只用它，你得到的是单个或多个编译后的JS文件，而非合并后的单文件打包产物。

浏览器端可行的解决方案 #

针对你在浏览器里实现TS编译+打包的需求，首推esbuild-wasm，这是目前最适合的方案：

• 它是esbuild的WebAssembly版本，完全可以在浏览器环境中运行，无需后端支持
• 内置TS编译能力，同时支持完整的打包功能（模块合并、压缩、树摇等）
• 编译和打包速度极快，性能远超传统工具

其他可选方案包括：

• Rollup的浏览器适配版本：需要手动处理TS编译的插件（如@rollup/plugin-typescript），配置相对繁琐
• Parcel的浏览器实验性版本：功能全面但体积较大，加载速度不如esbuild-wasm

简单实现思路（以esbuild-wasm为例） #

1. 引入esbuild-wasm的CDN资源到你的网页中
2. 获取用户输入的TS源代码
3. 调用esbuild的build方法，配置参数：

   const result = await esbuild.build({
     entryPoints: ['input.ts'],
     bundle: true,
     format: 'iife', // 生成浏览器可直接运行的立即执行函数
     write: false, // 不写入文件，返回内存中的结果
     stdin: {
       contents: userInputTsCode,
       resolveDir: '/'
     }
   });
   

4. 将打包后的JS代码生成Blob对象，创建URL后打开新窗口：

   const blob = new Blob([result.outputFiles[0].text], { type: 'application/javascript' });
   const url = URL.createObjectURL(blob);
   window.open(url);
   

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