Webpack 如何处理 async/await 代码？
在现代的 Web 开发中，async/await 已经成为了异步编程的主要方式。它通过语法糖的方式让异步代码看起来更加简洁清晰，允许开发者使用类似于同步代码的结构来处理异步请求。但是，由于异步请求需要时间来完成，它们不像同步代码那样易于处理。在前端开发中，Webpack 是一个非常受欢迎的打包工具，但是它不一定能完全处理 async/await 代码。那么，我们应该如何使用 Webpack 处理 async/await 代码呢？
首先，我们来看一下如何使用 async/await，下面是一个简单的示例：
-- -------------------- ---- ------- ----- -------- ------------- - ----- --- - ----- ------------------- ------ ----- ----------- - --------------------------- -- - ---------------------- ------------ -- - ----------------- ---
上面的代码使用了 async/await 来简化异步请求的代码。它首先使用 fetch 方法向服务器发送异步请求，然后使用 await 等待请求的响应并处理成 json 数据。最终返回一个 Promise，可以在 then 方法中处理请求的结果，也可以在 catch 方法中处理请求的错误。
如果我们使用 Webpack 打包上面的代码，可能会遇到一些问题，特别是在一些旧版的浏览器中。Webpack 默认使用了 babel-loader 来编译 ES6 代码，但是 babel-loader 并不能完美地编译 async/await 代码。这时，我们需要通过安装额外的插件来解决问题。
万幸的是，有一个叫做 @babel/plugin-transform-runtime 的插件，它可以将 async/await 转化为 ES5 代码，从而使我们的代码能够在更多的浏览器中正常工作。这个插件还需要其他一些插件的配合，包括 @babel/runtime 和 @babel/polyfill。@babel/runtime 提供了 await 和 async 函数的运行时函数，而 @babel/polyfill 可以让我们使用诸如 Promise 和 Set 等的现代 API。
下面是一个 Webpack 配置文件的示例，它使用了 @babel/plugin-transform-runtime 来处理 async/await 代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- -
----------------------------------- -
-------------- ----
--
-
-
-
-
-
-
--上面的配置文件中，我们将 @babel/plugin-transform-runtime 插件添加到了 babel-loader 的插件列表中，并开启了 regenerator 选项。这样就可以将 async/await 转化为 ES5 代码。
除了上面提到的插件，我们还需要手动引入 @babel/polyfill：
import "@babel/polyfill";
在引入这个模块后，我们就可以在代码中使用 Promise 和 Set 等 API 了。
总结：
async/await 已经成为了异步编程的主流方式，但是在使用 Webpack 打包前需要注意，先安装插件 @babel/plugin-transform-runtime，它可以将 async/await 转化为 ES5 代码，并引入 @babel/polyfill 来使用更多现代 API。这样，我们就可以在更多的浏览器中正常运行我们的代码了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a91bf948841e9894567f71