我正在处理一个TypeScript项目,该项目包含在浏览器客户端和基于节点的服务器之间共享的各种模块。我们想将模块与浏览器的webpack / rollup捆绑和摇晃,​​这需要将TypeScript编译器配置为以ES6为目标,以保留导入。但是,要在Node上运行,我们需要以ES5为目标,这会将导入变成需求,从而防止了摇晃。

有没有一种优雅的方法可以解决此问题,而无需两次编译所有内容,一次编译到ES5,再一次编译到ES6?

最佳答案

可能的解决方案是:

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

缺点:


在这种情况下,您将无法使用汇总CLI API,则需要编写脚本


.2使用汇总作为主要播放器,并使用rollup-plugin-typescript通过汇总生成两个不同的目标:ES5和ES6。在汇总中,从一个捆绑包生成许多目标非常简单。

缺点:


即使正式生活在Rollup的组织机构下,rollup-plugin-typescript的开发速度也非常慢。我无法将其描述为“稳定”。


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

缺点:


提供ESM需要修补程序到Node目标(简单)


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

关于javascript - 浏览器和 Node 之间共享的摇树TypeScript/JavaScript,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47851457/

10-12 04:14