为什么有些使用typescript/webpack的项目也使用babel来完成编译

Question

我注意到一些使用 typescript 和 webpack 的 web 项目也使用 babel 来完成编译。比如他们用ts编译成ES2015，然后用babel编译成es5。为什么不直接用ts编译成es5呢？

是不是项目也有需要编译的js，所以他们只用babel做所有事情？或者我错过了什么？

谢谢。

Answer 1

这有几个可能的原因。

1. 他们使用的是巴贝尔自动填充工具-打字稿仅执行语法转换，让用户找出运行时，他们将需要大约库（例如Promise，Symbol等）。这允许您决定这些 polyfill 的哪种实现最适合您，但这可能会很痛苦。Babel 让你免去思考这个问题的负担。这是一个权衡。
2. 他们需要它来进行自定义转换- TypeScript 有一个转换管道，但只有在此时您使用 TypeScript API 时才能访问它。如果您已经在使用 Babel 并且想开始使用 TypeScript，但是您已经在使用转换，那么这是一个合理的折衷方案。
3. 它是在 TypeScript 不支持将生成器编译为 ES5 时创建的（甚至当 TypeScript 不支持ES5 中的async/await时） - TypeScript从 2.1 开始就在 ES5 中支持async/ await，并且downlevelIteration从 2.3开始支持标志背后的生成器。在此之前，用户经常依靠 Babel 来弥补不足，但这里不再需要 Babel。
4. 它是在 Webpack 2 之前创建的，并且该项目使用了一种特定的导入模块的方式——TypeScript有一个allowSyntheticDefaultImport选项，它告诉 TypeScript 可以使用默认导入来导入某些模块。Babel 支持这种行为，但 Webpack 直到 Webpack 2 出现才支持。对于较新版本的 Webpack，此处不再需要 Babel。

这可能不是完整的原因，但这是我能想到的几个原因。