在现代的前端开发中，使用 ES6 已经是标配。然而，由于不同浏览器对 ES6 的支持程度有差异，为了兼容老旧的浏览器，我们需要使用 Babel 进行编译。但是，使用 Babel 编译 ES6 时，有时候会破坏调用栈，导致调试起来变得困难。那么，我们该如何使用 Babel 编译 ES6，同时又不会破坏调用栈呢？
什么是调用栈？
在 JavaScript 中，每当一个函数被调用时，JavaScript 引擎都会为其创建一个执行上下文，并将其保存在一个被称为“调用栈”（Call Stack）的数据结构中。执行上下文包括函数的参数、变量、函数的返回地址等信息。当函数执行完毕并返回时，该函数的执行上下文就会被从调用栈中弹出。
调用栈是一个 LIFO（后进先出）结构，也就是说，最后进入调用栈的函数会最先执行完毕并被弹出。
Babel 编译 ES6 时如何破坏调用栈？
当我们使用 Babel 编译 ES6 代码时，Babel 实际上是将我们写的 ES6 代码转换成 ES5 代码。这个过程中，Babel 会改变一些代码的结构，例如使用 var 关键字来代替 let 或 const 关键字。
当一个函数在编译后的代码中被调用时，它的函数名可能已经发生了变化，这就会导致调用栈上的函数名和实际的函数名不一致，从而使得调试变得困难。
如何避免破坏调用栈？
为了避免破坏调用栈，我们需要在 Babel 的配置文件中添加 transform-runtime 插件。这个插件会自动引入一个运行时（称为 babel-runtime），从而避免在编译时破坏调用栈。
以下是一个 .babelrc 文件的示例配置：
-
---------- -
--------------------- -
---------- -
----------- ------ - ---------- --- -- ----
--
-------------- -------
--
--
---------- -
---------------------------------
-
-除了添加 transform-runtime 插件以外，我们还需要在代码中使用 import 关键字来引入需要的 Polyfill，例如：
------ ------------------------ ------ ---------------------------
这个方式可以保证我们的编译后代码不会破坏调用栈。
结论
使用 Babel 编译 ES6 代码是必不可少的，但是我们需要注意避免破坏调用栈。为此，我们可以添加 transform-runtime 插件，并在代码中手动引入需要的 Polyfill。这个过程可能会增加一些额外的开销，但是能够保证我们的代码和调试都能够正常工作。
示例代码
这里是一个使用了 ES6、Babel 和 transform-runtime 插件的示例代码：
------ ------------------------
------ ---------------------------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ---------------
-
-
----- ------ - --- ----------------
---------------在上面的代码中，我们使用了 import 关键字引入了两个 Polyfill，保证了我们的代码不会破坏调用栈。同时，我们还使用了 ES6 的类和箭头函数语法编写了代码。这个代码在编译之后会被转换成 ES5 代码，并且不会破坏调用栈。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6735e3090bc820c582510592