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

Posted 2023-03-13

【中文标题】为啥有些使用typescript/webpack的项目也使用babel完成编译

【英文标题】：Why do some projects that use typescript/webpack also use babel to finish compilation为什么有些使用typescript/webpack的项目也使用babel完成编译

【发布时间】：2017-12-21 12:41:59

【问题描述】：

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

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

谢谢。

【参考方案1】：

这有几个可能的原因。

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

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

【参考方案2】：

为什么不直接用ts直接编译成es5呢？

这就是我所做的。

关于混合 Babel 和 TypeScript

两者一起使用没有缺陷。因为两者都这样做：

 (non js OR js) => standard js

你可以的

 (non js OR js) => standard js => es5 

TS -> JS -babel> ES5 或 Babel -> JS -ts> ES5

人们这样做的原因是为了支持多种语法：https://kangax.github.io/compat-table/

个人

如前所述。我不使用 Babel as I TypeSafety is big for me and don't need to use syntax that isn't yet type safe ?

【参考方案3】：

Typescript 是从 ES2016 开始的演变。 Typescript 帮助来自 c# 和 java 背景的开发人员使用各种工具成为 javascript 开发人员。 Visual Studio 代码、WebStorm、Sublime 等。

原因：我们不能单独使用 Typescript 将 ts 转换为 ES5 使用 TypeScript 编译到 ES5 不如使用 Babel 完整。一些现代语言特性，例如 Array.prototype.find，无法使用 TypeScript 编译为 ES5。

这里是可以帮助您的链接：https://www.stackchief.com/blog/TypeScript%20or%20Babel%3F