浏览器和Node之间共享的树形抖动TypeScript / JavaScript

Question

我正在开发一个TypeScript项目，该项目包含浏览器客户端和基于节点的服务器之间共享的各种模块。我们希望使用webpack / rollup为浏览器捆绑和树形化模块，这需要将TypeScript编译器配置为以ES6为目标，以便保留导入。但是，要在Node上运行，我们需要定位ES5，这会将导入变为需求，从而防止树木抖动。

有没有一种优雅的方法可以解决这个问题而不需要编译两次，一次是ES5，另一次是ES6？

Answer 1

可能的解决方案是：

.1在两种情况下都针对单个ES6，但在Node情况下，使用启用了external选项且目标ES5的其他Rollup步骤。在这种情况下tsc保证删除所有类型的注释和其他类型相关的东西，然后Rollup通过转换ES6→ES5和树摇动的东西来完成繁重的工作。您需要Rollup的JavaScript API，因为CLI API仅支持具有特定模块的external = string[]，但您需要«外部全部»。在这种情况下，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。

缺点：

• 提供ESM需要修补程序到Node目标（简单）

.4如果«编译所有内容两次»的主要问题是速度，那么只在生产中进行完全构建（即使它是两次构建）。您可以引入一些简单的脚本，只在dev中执行必要的操作并利用tsc的（或Rollup的）--watch能力。