随着 ES6 成为了前端开发中不可或缺的部分，我们也要考虑如何兼容低版本浏览器。这时就需要使用 polyfill 来实现对新特性的模拟。本文将介绍 Babel 编译 ES6 时如何使用 polyfill。
什么是 polyfill
polyfill 是一种 Web 开发技术，它是一组 JavaScript 代码（通常是一个或多个函数），可用于实现 Web 标准或 DOM API 的浏览器支持，以实现在旧版本的浏览器上使用新的 API。
polyfill 的主要作用是为了解决浏览器兼容性问题，让开发者在使用新特性的情况下不需要担心旧浏览器的兼容性问题。Babel 内置了 polyfill 功能，可以对使用了新特性的代码进行转换，以便在旧版本浏览器上运行。
如何使用 polyfill
在使用 polyfill 时，需要在首次加载页面时引入 polyfill 库，以使代码在执行前能正确地加载 polyfill。我们可以选择引入整个 polyfill 库，也可以按需引入需要的 polyfill。
引入整个 polyfill 库
如果直接引入整个 polyfill 库，可以使用 @babel/polyfill，它是 Babel官方推荐的核心 polyfill 库。
import '@babel/polyfill';
引入之后，在使用新特性的代码之前，Babel 将会在全局环境中添加所需的 polyfill，您即可在不同浏览器和环境下使用类似 async/await 和WeakMap 等新特性。
按需引入 polyfill
如果不想引入整个 polyfill 库，可以按需引入需要的 polyfill。Babel 官方提供了一个名为 core-js 的 polyfill 库，它可用于向浏览器添加某些 Web 标准缺失的功能。
下面是按需引入某些 polyfill 的示例：
import "core-js/features/promise"; import "core-js/features/array/from";
在上面的示例中，我们引入了 Promise 和 Array.from 的 polyfill 库。这样，在执行代码时就可以在不支持这些新特性的浏览器环境中使用了。
在 Babel 中使用 polyfill
使用 Babel 转换时，可以在配置文件中添加一个名为 @babel/preset-env 的 preset 来自动地处理 polyfill，它会根据目标浏览器或运行环境自动引入相应的 polyfill。
例如，使用 @babel/preset-env 转换代码：
module.exports = {
presets: [
'@babel/preset-env'
]
};这样配置后，Babel 将根据浏览器支持情况自动引入所需的 polyfill。如果运行环境中已支持某些新特性，则不会引入相应的 polyfill。
总结
在现代 Web 开发中，polyfill 是解决浏览器兼容性问题的常见方式之一。Babel 内置了 polyfill 功能，并提供了方便的库支持，使得我们可以方便地使用它来为旧版本浏览器添加新特性。在实际的项目开发中，合理使用 polyfill 是很重要的。
希望通过本文的介绍和示例，大家对如何使用 Babel 编译 ES6 时使用 polyfill 有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65364af97d4982a6ebe4d3c5