如果你已经学习了前端开发，那么一定知道 Babel。它是一个强大的 JavaScript 编译器，可以将 ES6/ES7/ES8 等高阶标准版本的 JS 代码转化成 ES5 代码，从而使浏览器支持更多的特性。
虽然 Babel 广泛用于开发，但使用起来并不容易，一些同学可能会遇到一些问题。如果你正在学习 Babel，那么你需要一个 Babel 试验平台，可以让你测试自己的 Babel 代码，并能查看转化后的结果。
今天我想向大家分享的是一个非常好的 Babel 试验平台： Babel in Browsers。在这个平台上，你可以轻松测试自己的 Babel 代码，并可以实时查看转化后的结果。
Babel in Browsers
Babel in Browsers 是一个基于浏览器的在线 Babel 编译器和调试器，在该平台上，你可以测试 ES6/ES7/ES8 代码，并能够查看转化后的结果。
为了开始使用 Babel in Browsers，你需要访问 Babel 官方网站：https://babeljs.io。在导航菜单下，你可以看到一个名为 “Try it Out” 的选项。这将带你到一个页面，你可以在该页面输入你的 Babel 代码。
一旦你输入了你的代码，就可以在下方看到转化后的代码，该代码可以在浏览器中运行。此外，你还可以查看AST、原始代码和不同阶段的转化结果等信息。
示例代码
为了更好的理解如何使用 Babel，以下是一个示例代码：
-- -------------------- ---- -------
----- ------- -
------------- -
--------- - --------
-
---------- -
------------------ - - -----------
-
-
----- ------- - --- ----------
-------------------这是一个简单的 ES6 类的示例代码，它定义了一个名为 Example 的类，并在该类中定义了两个方法。这个示例代码转化成 ES5 代码后的结果如下：
-- -------------------- ---- -------
---- --------
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
--- ------- - -------- --------- -
--------------------- ---------
--------- - --------
--
-------------------------- - -------- -- -
------------------ - - -----------
--
--- ------- - --- ----------
-------------------可以看出，Babel 将 ES6 的类转化成了 ES5 中常用的函数表达式。这样，我们就可以轻松地测试我们的 ES6 代码。
总结
Babel in Browsers 是一个非常好的 Babel 试验平台，它可以让我们轻松地测试自己的 Babel 代码，并能够查看转化后的结果。同时，它与我们在项目中使用的 Babel 代码保持一致，因此它可以帮助我们更好地理解和调试我们的 Babel 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471ecd7968c7c53b0fd7750