ES6 是 JavaScript 的一个重要版本，在这个版本中引入了很多新特性，比如箭头函数、解构赋值、类等等。然而，ES6 特性并不是所有浏览器都完全支持的，这就导致了在某些浏览器中运行 ES6 应用会出现兼容性问题。为了解决这个问题，我们可以使用 Babel 和 Babel-polyfill。
Babel 是什么？
Babel 是一个 JavaScript 编译器，它可以将使用最新语法编写的 JavaScript 代码转换为浏览器可以识别的 JavaScript 代码。Babel 还支持很多插件，可以将 JavaScript 代码转换为其他类型的代码，比如 TypeScript、React 等。
安装 Babel
安装 Babel 很简单，只需要在终端中执行以下两条命令：
npm install --save-dev @babel/core @babel/cli npm install --save-dev @babel/preset-env
使用 Babel
使用 Babel 也很简单，在终端中执行以下命令即可将 ES6 代码转换为 ES5 代码：
npx babel input.js -o output.js
以上命令将 input.js 文件转换为 ES5 代码，并输出到 output.js 文件中。
Babel-polyfill 是什么？
在转换 ES6 代码为 ES5 代码的过程中，Babel 只会转换语法，而不会转换 API。如果你使用了某些 ES6 的 API，比如 Promise、Set 等，就会出现兼容性问题。为了解决这个问题，我们可以使用 Babel-polyfill。
Babel-polyfill 是一组 JavaScript 代码，它模拟了浏览器中缺失的 ES6 API。你可以在应用的入口文件中引入 Babel-polyfill，这样就可以确保在所有浏览器中都可以使用 ES6 API 了。
安装 Babel-polyfill
安装 Babel-polyfill 也很简单，只需要在终端中执行以下命令：
npm install --save @babel/polyfill
使用 Babel-polyfill
在应用的入口文件中引入 Babel-polyfill 即可，如下所示：
import "@babel/polyfill";
以上代码会将 Babel-polyfill 的代码添加到你的应用中，这样就可以确保所有浏览器都可以使用 ES6 API 了。
示例代码
下面是一个使用 Babel 和 Babel-polyfill 的示例代码：
-- -------------------- ---- -------
------ ------------------
----- ------- - --- ----------------- ------- -- -
------------- -- -
--------------- ---------
-- ------
---
--------------------- -- -
--------------------
---
----- --- - --- ------
-----------
-----------
-----------
----------------------以上代码中，我们同时使用了 Promise 和 Set 这两个 ES6 API。如果在不支持 ES6 的浏览器中运行该代码，就会出现兼容性问题。但是，在引入了 Babel 和 Babel-polyfill 后，即使在旧浏览器中也可以运行该代码了。
总结
使用 Babel 和 Babel-polyfill 是解决 ES6 应用兼容性问题的最佳方案。使用 Babel 可以将 ES6 代码转换为 ES5 代码，而 Babel-polyfill 则提供了 ES6 API 的模拟。通过引入这两个工具，就可以确保 ES6 应用在所有浏览器中都可以正常运行了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e3473df6b2d6eab3eb0469