前言
在现代前端开发中，使用 ES6 已经成为了标配。然而，由于各种原因（例如浏览器的版本支持限制），我们在编写代码时可能会使用一些 ES6 的新特性，但是在打包后的代码中，这些新特性却被转换成了 ES5 语法，这就需要借助 Babel 和 Webpack 来实现。
然而，有时候在使用 Babel 和 Webpack 打包后，我们会发现有些 ES6 语法仍然无法被浏览器所支持，这时候该怎么办呢？本文将会为大家介绍解决这个问题的方法。
问题分析
在使用 Babel 和 Webpack 进行打包时，我们通常会安装一些 babel 插件，例如 @babel/preset-env，它可以根据我们所需要的浏览器版本来自动转换我们使用的 ES6 语法。然而，有时候即使我们使用了这些插件，仍然会发现一些 ES6 语法无法被浏览器所支持，这是为什么呢？
其实，这是因为有一些 ES6 语法虽然被转换成了 ES5 语法，但是它们需要在浏览器中使用一些新的 API 才能正常运行，而这些 API 可能并不是所有的浏览器都支持的。例如，Promise 就是一个很好的例子，虽然它可以通过 Babel 转换成 ES5 语法，但是在一些较老的浏览器中，却无法运行，因为它们不支持 Promise 所需要的 API。
解决方案
那么，我们该怎么解决这个问题呢？其实，我们可以通过引入一些 polyfill 来实现。polyfill 是一种 JavaScript 代码，它可以在不支持某些 API 的浏览器中模拟这些 API 的功能，从而使我们的代码可以在所有浏览器中正常运行。
在使用 Babel 和 Webpack 进行打包时，我们可以使用 @babel/polyfill 这个插件来引入 polyfill。它会自动引入一些 polyfill，例如 Promise、Object.assign 等，从而使我们的代码可以在所有浏览器中正常运行。
下面是使用 @babel/polyfill 的示例代码：
import '@babel/polyfill'; // 这里可以使用 ES6 的新特性，例如 Promise、async/await 等
需要注意的是，@babel/polyfill 会将所有的 polyfill 都引入到我们的代码中，这可能会导致打包后的代码过大，从而影响网页的加载速度。因此，我们可以使用 core-js 这个库来选择性地引入一些 polyfill。
下面是使用 core-js 的示例代码：
import 'core-js/es6/promise'; // 这里可以使用 Promise 等被引入的 polyfill
总结
在使用 Babel 和 Webpack 打包后，有些 ES6 语法可能无法被浏览器所支持。为了解决这个问题，我们可以使用 polyfill 来模拟这些 API 的功能，从而使我们的代码可以在所有浏览器中正常运行。在使用 polyfill 时，我们可以使用 @babel/polyfill 来引入所有的 polyfill，也可以使用 core-js 来选择性地引入一些 polyfill。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d6db5d2f5e1655d8415a0