ES6 是 JavaScript 的一个重大更新版本，它引入了许多新的语言特性和 API，使得我们能够更加方便、高效地编写代码。然而，由于不同浏览器对 ES6 特性的支持程度不同，我们需要使用 Babel 编译器将 ES6 代码转换为 ES5 代码，以便在所有浏览器中运行。同时，为了支持一些浏览器缺失的 API，我们还需要使用 Polyfill。
Babel 的安装和配置
安装 Babel
--- ------- ---------- ----------- ---------- -----------------
这里我们安装了 Babel 的核心模块
@babel/core、命令行工具@babel/cli和预设@babel/preset-env。配置 Babel
在项目根目录下创建一个
.babelrc文件，用于配置 Babel 的参数。- ---------- - - -------------------- - ---------- - ----------- ------ - ---------- --- -- ---- -- -------------- -------- --------- - - - - -这里我们使用
@babel/preset-env预设，将 ES6 代码转换为 ES5 代码，并根据浏览器的支持情况进行必要的转换。其中，targets字段指定了要支持的浏览器版本，useBuiltIns字段指定了如何引入 Polyfill，corejs字段指定了使用的 core-js 版本。
Polyfill 的安装和配置
安装 Polyfill
--- ------- ------ -------
这里我们安装了 core-js，它是一个提供了许多浏览器缺失的 API 的 Polyfill 库。
配置 Polyfill
在入口文件（比如
index.js）中引入 Polyfill：------ ----------------- ------ ------------------------------
这里我们使用了
core-js/stable模块和regenerator-runtime/runtime模块，分别提供了 ES6 和 ES7 的 Polyfill。
示例代码
下面是一个使用 Babel 和 Polyfill 的示例代码：
-- -------- ------ ----------------- ------ ------------------------------ ----- --- - --- -- -- - - -- ------------------ ----
使用 Babel 编译后的代码：
-- -------- ---- -------- --------------------------------------------- ------------------------------------------- ----------------------------------------------- -------------------------------------- ---------------------------------------------- ---------------------------------------------- -------------------------------------------------------- --------------------------------------- --- --- - -------- ------ -- - ------ - - -- -- ------------------ ----
总结
使用 Babel 编译 ES6 代码并同时支持 Polyfill，可以让我们的代码在各种浏览器中运行，提高了代码的兼容性和可靠性。在配置 Babel 和 Polyfill 时，需要根据项目的实际情况进行调整，以达到最佳的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6506c89d95b1f8cacd27538e