2018 年还需要 Babel 吗？ [关闭]答案

【问题标题】：Is Babel still required in 2018? [closed]2018 年还需要 Babel 吗？ [关闭]
【发布时间】：2018-01-28 13:09:07
【问题描述】：

我现在正在学习 JavaScript，有人说在我学习了 HTML 和 CSS 以及 vanilla Javascript 之后，我需要了解 ES6/ES2015。当我在 Youtube 上观看教程时，它说我们需要 Babel 或类似的东西让浏览器阅读它。所以我想知道，因为那个视频不是那么旧（但仍然很旧）。是否仍然需要拥有 Babel 或者我应该跳过这个 Babel 事情？

【问题讨论】：

实际上babel 是一个转译器，并且转译器总是需要使用尖端功能，因为所有浏览器供应商不会同时实现所有语言功能。
Babel 让过时的浏览器可以理解你闪亮的代码。继续编写新语法并通过 Babel 运行它。你不需要理解或学习 Babel。你只需要通过它运行你的代码。
哈哈，Alpha 遇到 Alpha_Bords 时的那种情况。但实际上你并不需要 Babel，直到你注意到某些浏览器不能正常工作。在那之前，我会完全忽略它。
@smnbbrv，没看到 :-)
非常感谢。老实说，我真的很受宠若惊这个网站的运作方式，它让我很轻松，因为我是一个完整的 Web 开发初学者。但我不会滥用它，并且会继续编码直到我的手指流血。哈哈谢谢

标签： javascript babeljs

【解决方案1】：

Babel 是一个 JavaScript 到 JavaScript 的编译器，有时也称为 transpiler，它将使用一组特性（例如，ES2015 和更高版本中的特性）编写的代码转换为可以在不支持这些功能的 JavaScript 环境中运行。（还有其他的，Babel 只是一个非常流行的。）

是否使用 Babel 将 ES2015+ 代码转译为 ES5 完全取决于您，并且取决于您想要支持的目标环境。例如，如果您想支持任何版本的 Internet Explorer¹（包括 IE11），则需要进行转译。如果您只需要支持最先进的 Chrome、Firefox 和 Edge，或其他可以依靠您正在使用的功能的环境（例如最新的 Node.js 安装），那么您不需要。

Kangax 有一组 handy tables 用于说明哪些 JavaScript 引擎和/或浏览器支持哪些更现代的 JavaScript 功能（不仅仅是 ES2015，还有 ES2016、ES2017 等）。

Babel（以及类似的工具）除了使用最新标准化的功能外，至少在两个方面很有用：

您可以使用 Babel（和类似的）来利用可能很快就会标准化的功能，即使它们还没有得到很好的支持。例如，公共类字段的基础很长时间没有改变，但the proposal they're in 仍然（截至 2018 年 6 月撰写本文）处于第 3 阶段（并且一直在第 2 阶段和第 3 阶段之间来回切换）几次）由于与公共类字段无关的原因，甚至像 Chrome、Firefox 和 Edge 这样的尖端浏览器还没有支持公共类字段。但如今，通过转译器使用类字段很常见。
您可以编写自己的 Babel（或类似的）转换来为您自己的项目（或使用其他人编写的）添加自己的功能到 JavaScript，即使这些功能永远不会成为 JavaScript 的一部分或在外部使用你的项目。

¹ 注意：Internet Explorer is sunset as of June 15th 2022 在大多数 Windows 版本中。但是在 Microsoft Edge 中有一个“Internet Explorer”模式，天堂帮助我们，它实际上从该模式下的 JavaScript 环境中删除了模板文字、for-of 等功能。

【讨论】：

关于您的 cmets " 例如，如果您想支持任何版本的 IE（包括 IE11），则需要进行转译。如果您只需要支持最先进的 Chrome、Firefox 和Edge 或其他您可以依赖正在使用的功能的环境（例如最新的 Node.js 安装），但您不需要。”请注意几天前微软宣布停止使用 IE 并部署新版本的浏览器，其基本核心将基于铬，因此从技术上讲，在具有 IE（基于铬）的 Windows 上，您将来不需要 babel。谢谢
这里是 windows central 上的公告：windowscentral.com/…
@DineshNagari - 你混淆了 IE 和 Edge。 IE 永远不会是基于 Chromium 的，如果你需要支持 IE（即使是老化的“最新”，IE11），你需要转译。 Edge（它已经有一个相当新的 JS 引擎）正在被基于 Chromium 的东西所取代。我们可以肯定的是，Anaheim（新 Edge）将使用 Blink（Chrome 的渲染引擎）。我们没有从微软那里得到任何确认，它将使用 V8（Chrome 的 JavaScript 引擎）而不是 Chakra（MS），尽管微软员工已经对 v8/v8 项目进行了提交，这表明它会使用。
感谢 Crowder 的澄清，但是一旦他们弃用 IE 以及 Micorsoft 何时开始渲染边缘更新（基于 V8 而不是 chakra），没有人会确定使用 IE，并且它会很快就会发生，他们正在积极努力。
（我们现在知道他们在 Edge 的 Chromium 版本中使用 V8。不过，他们将继续将 Chakra 用于 Windows 通用应用程序。）

【解决方案2】：

不要跑题——作为初学者，我建议远离工具和配置。这可能是压倒性的，尤其是在 JS 领域。只专注于学习，工具稍后会出现。您无需任何工具即可立即开始使用 ES6。

一种方法是使用在线 REPL 或 Playground。我喜欢的一个工具是https://stackblitz.com 这个网站让您真正感受到从npm 导入模块以帮助您的代码。如果您使用的是 Chrome，则可以打开开发者控制台并查看您从 Playground 发送到开发者控制台的消息。

https://developer.chrome.com/devtools

这是我为你准备的游乐场

https://stackblitz.com/edit/react-t3wxth?file=index.js

【讨论】：

也许这是吹毛求疵，但我会说这样的 REPL/playground 无论如何都是一个工具，如果它支持 ES2015+ 和其他不受支持的功能，那么它或多或少地做着与 babel 相同的事情。同样，如果有人认真考虑发展，他应该练习蜂拥而至，最终，蜂拥而至开始变得正常。
来自我自己的学习经历。在某个时候，我开始意识到 babel 作为一种工具在思考 javascript 是什么以及它是如何工作的方面提供了杠杆作用。值得参与