我正在开发一个 TypeScript 项目，其中包含在浏览器客户端和基于节点的服务器之间共享的各种模块。我们希望使用 webpack/rollup 为浏览器捆绑和摇树模块，这需要将 TypeScript 编译器配置为以 ES6 为目标以保留导入。但是，要在 Node 上运行，我们需要以 ES5 为目标，这会将导入转换为需要，从而防止 tree-shaking。
有没有一种优雅的方法来解决这个问题，而无需将所有内容编译两次，一次编译到 ES5，再编译一次到 ES6？
【问题讨论】：
标签： javascript node.js typescript webpack rollup
可能的解决方案是：
.1 在这两种情况下都以单个 ES6 为目标，但在 Node 情况下，使用启用了external 选项并以 ES5 为目标的附加 Rollup 步骤。在那种情况下，tsc 保证删除所有类型注释和其他与类型相关的东西，然后 Rollup 通过转换 ES6 → ES5 和 tree-shaking 的东西来完成繁重的工作。您将需要 Rollup 的 JavaScript API，因为 CLI API 仅支持带有具体模块的external = string[]，但您需要«external all»。在这种情况下，JavaScript API：external: (id) => id != main_file。
缺点：
.2 使用 Rollup 作为主要播放器，rollup-plugin-typescript 使用 Rollup 生成两个不同的目标：ES5 和 ES6。在 Rollup 中，从一个 bundle 生成多个目标非常简单。
缺点：
.3 仅生成 ES6 并使用 ESM 作为 Node 目标。您可以通过链接了解更多信息，但实际上这已经很好用了performance shall be OK。
缺点：
.4 如果您对«编译所有内容两次»的主要问题是速度，那么只在生产环境中进行完整构建（即使它两次构建）。您可以引入一些简单的脚本，只在 dev 中执行必需的操作并利用 tsc（或 Rollup 的）--watch 能力。
【讨论】：