javascript - 在浏览器和 Node 之间共享 Tree-shaking TypeScript/JavaScript

Question

我正在开发一个 TypeScript 项目，其中包含浏览器客户端和基于 Node 的服务器之间共享的各种模块。我们希望使用浏览器的 webpack/rollup 来捆绑和 tree-shake 模块，这需要将 TypeScript 编译器配置为针对 ES6 以保留导入。然而，要在 Node 上运行，我们需要以 ES5 为目标，它将 import 转换为 require，从而防止 tree-shaking。

是否有一种优雅的方法可以解决这个问题，而无需将所有内容编译两次，一次编译为 ES5，另一次编译为 ES6？

Answer 1

可能的解决方案是:

.1 在这两种情况下都以单个 ES6 为目标，但在 Node 情况下使用附加的汇总步骤 external启用选项并以 ES5 为目标。在这种情况下，tsc 保证删除所有类型注释和其他与类型相关的内容，然后 Rollup 通过转换 ES6 → ES5 和 tree-shaking 内容来完成繁重的工作。您需要 Rollup 的 JavaScript API，因为 CLI API 仅支持带有具体模块的 external = string[]，但您需要“external all”。在这种情况下，JavaScript API:external: (id) => id != main_file。

缺点:

• 在这种情况下，您无法使用 Rollup CLI API，您需要编写脚本

.2 使用Rollup作为主要参与者和rollup-plugin-typescript使用 Rollup 生成两个不同的目标:ES5 和 ES6。在 Rollup 中，从一个包生成多个目标非常简单。

缺点:

• rollup-plugin-typescript，即使正式属于 Rollup 的组织翼，开发也非常缓慢。我无法将其描述为“稳定”。

.3 仅生成 ES6 并使用 ESM对于 Node 目标。您可以通过链接了解更多信息，但实际上这已经很好用了，performance shall be OK .

缺点:

• 向 Node 目标提供 ESM require patcher(简单)

.4 如果“将所有内容编译两次”的主要问题是速度，那么仅在生产中进行完整构建(即使它两次构建)。您可以引入一些简单的脚本，仅在开发中执行所需的操作并利用 tsc(或 Rollup 的)--watch 功能。