如何在Monaco Editor中引入外部npm库并获取可运行的转译JS代码

可行实现方案 #

单靠Monaco内置的TS转译能力确实无法实现依赖打包的需求，无需自研复杂的TS Compiler API调用逻辑，有两种成熟的落地路径可选：

方案1：轻量化方案（适合少量固定第三方库的演示场景） #

• 类型提示层：沿用你已经在用的addExtraLib方法，把需要用到的npm库的d.ts类型定义注入Monaco实例，保证编辑器内的智能提示、类型校验正常工作。
• 依赖加载层：在你的网站全局配置importmap，把用到的第三方库的包名映射到公共ESM CDN的对应资源地址，浏览器原生支持该特性，无需额外引入工具。
• 转译执行层：修改Monaco调用TS worker时的编译配置，将compilerOptions.module设为ESNext，保证转译输出的JS代码使用原生ESM的import语法而非CommonJS的require。执行代码时将转译后的JS内容通过动态import或者插入type="module"的script标签运行，浏览器会自动通过importmap拉取对应的第三方库逻辑，不需要本地打包。

方案2：全功能方案（适合复杂依赖、多文件的演示场景） #

• 编辑器层保持现有Monaco的配置，addExtraLib注入类型定义的逻辑不变，保证编辑体验不受影响。
• 替换转译逻辑：放弃Monaco自带的getEmitOutput转译，改用浏览器端运行的esbuild-wasm工具处理编译打包。只需要把编辑器内的TS代码作为入口传入esbuild的API，配置对应编译参数，即可直接输出包含所有依赖逻辑的可运行JS代码，打包速度远快于原生TS Compiler API，用户无感知。
• 安全控制：如果需要限制用户只能使用你指定的第三方库，可以在esbuild配置中将这些库设为external，配合importmap加载，避免用户引入未授权的依赖。

实现注意事项 #

• 执行用户输入的代码时建议放在沙箱iframe或者独立的worker上下文运行，避免恶意代码篡改你的网站主页面逻辑。
• 若选择esbuild方案，提前加载初始化wasm资源，避免用户第一次编译时出现长时间等待。

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