Babel 是一个 JavaScript 编译器，它可以将 ES6+ 的代码转换成向下兼容的 JavaScript 代码，以确保代码可以在现代化和旧式浏览器中正确地运行。Babel 主要用于 node.js 环境和构建工具中，但它也可以在浏览器中工作。
在浏览器环境中, Babel 的作用是为不支持 ES6+ 语法的浏览器提供 polyfill。Polyfill 是一个 JavaScript 代码片段，可以在不支持新 API 和语法的浏览器中模拟这些功能。通过使用 Polyfill，可以确保代码在不同的浏览器和设备上具有相同的运行行为。
Babel 实现浏览器端的 Polyfill
Babel 在浏览器端实现 Polyfill 的基本方法是通过添加一个 JavaScript 文件来提供在不支持新语法和 API 的浏览器中执行的代码。查看 Babel 官方网站的 Polyfill 页面上，可以看到有多个 polyfill 库，此处我们讲一下 Babel 官方的 Polyfill 库演示的例子。
- 首先需要在头部引用 Babel 的 CDN，如下：
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
- 如果想要使用一些特定的 polyfill，可以在引入
polyfill.min.js后，通过全局变量babel和require来加载指定的 Polyfill。例如：
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<script>
window.onload = function() {
var mod = require("@babel/polyfill/lib/core-js/modules/es6.symbol");
console.log(mod); // 输出 polyfill 代码
}
</script>通过这种方式，可以加载 Babel Polyfill 库中提供的指定 Polyfill，从而支持在旧版浏览器上使用新的语法和 API。
为何需要使用 Polyfill
为了向前兼容，ECMAScript 总是会引入新的语言特性和新的 API。然而旧的浏览器往往不支持这些新特性，这就使 JavaScript 开发者在编写代码时需要特别小心，以确保其在旧版浏览器中能够正常工作。此时，Polyfill 就可以解决这个问题。
使用 Polyfill，可以在不同浏览器和设备之间保持相同的行为，同时让开发者使用最新的语言特性和 API。
示例代码
-- -------------------- ---- ------- -- --- -- ----- ----- - ------ -- - ------------------- ----------- -- -- -- ----- ------ ---- -------- --- ----- - -------- ----------- - ------------------- - - ---- - ----- --
如上所示，ES6 语法的箭头函数被转换成了函数声明，这样旧版本的浏览器也能够正确执行这段代码了。
结论
Babel 是前端开发人员不可或缺的工具，同时也是提高代码质量和开发效率的一种方法。通过 Babel，在不同的浏览器和设备上编写代码就不再需要考虑语言特性和 API 的兼容性问题。使用 Polyfill，可以实现在旧版浏览器上运行最新的语言特性和 API，保证代码的可靠性和一致性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676fd9b9e9a7045d0d77567a