Babel 编译 ES7 async/await 引发的问题及解决方法
前言
在前端领域，Babel 是一个非常常见的工具，它可以将使用最新 ECMAScript 标准的代码转换为浏览器可以理解的代码。而 async/await 是 ES7 新增的一个语法糖，可以方便地处理异步操作。但是，当我们在使用 Babel 编译 ES7 async/await 代码时，可能会遇到一些问题，本文将介绍这些问题及其解决方法。
问题一：Babel 编译 async/await 后生成的代码体积过大
async/await 是生成器函数语法的一个语法糖，编译后的代码体积确实偏大，这是因为 Babel 为了支持 async/await 这个特性，需要加入一些运行时库，如 regenerator-runtime。这个运行时库包括了一些辅助函数，用于将 async/await 编译成 ES5 代码。因此，即使我们只是在一个简单的函数里使用了 async/await，也会生成一个庞大的代码体积。
解决方法：安装 async-to-promises 插件
async-to-promises 是一款 Babel 插件，可以将 async/await 转换成 Promise 的形式，这样就不需要引入 regenerator-runtime 运行时库了，从而缩小了编译出来的代码体积。
// .babelrc
{
"plugins": ["async-to-promises"]
}问题二：Babel 编译 async/await 后无法捕获代码中的错误
由于 async/await 是在 Promise 基础上封装出来的，如果在代码中抛出一个错误但没有捕获的话，就会将错误信息包装成一个 rejected 状态的 Promise 返回。但是，在 Babel 编译后的代码中，错误信息并没有被正确处理，无法被捕获到。
解决方法：安装 transform-async-to-generator 插件
transform-async-to-generator 是另一个 Babel 插件，它可以将 async/await 转换成使用生成器函数的形式，从而解决无法捕获错误的问题。
// .babelrc
{
"plugins": ["transform-async-to-generator"]
}问题三：Babel 编译 async/await 后无法在 IE 中运行
由于 IE 不支持 Promise，因此如果使用 Babel 编译后的 async/await 代码，在 IE 中会报错。
解决方法：引入 Promise 的 polyfill
我们可以使用 core-js 这个库来引入 Promise 的 polyfill，从而在 IE 中也能够运行 async/await 代码。
-- -------------------- ---- ------- -- ------- ------ ----------------- ------ ------------------------------ ----- -------- ------ - ----- ------ - ----- ------------------- -------------------- - -------
结论
Babel 作为前端工程化的常用工具，对于 async/await 这个新特性的支持是必不可少的。但是，在使用 async/await 的同时，我们要注意它带来的编译后的代码体积、错误处理和兼容性等方面的问题，并且要选择合适的解决方法。希望本文能对大家有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677393e96d66e0f9aae4cf57