Babel 如何正确配置 polyfill 以兼容 ES7 语法

随着 JavaScript 的不断发展，新的 ECMAScript 标准也在不断地推出。但是由于浏览器的兼容性问题，我们在实际项目中使用尚未得到广泛支持的新语法时，仍然需要使用 babel 转译成 ES5 或更早的版本进行兼容。而在这个过程中，我们也需要对 polyfill 的正确配置进行了解和应用。

什么是 polyfill？

简单地说，polyfill 是一些 JavaScript 代码，可以在旧浏览器中模拟新浏览器中已经原生支持的一些功能，例如 Promise、Object.assign、Array.from 等。polyfill 的引入，可以让我们不再关注浏览器对新语法的支持程度，而只需要关注开发过程中的语法使用。

配置 babel 和 polyfill

既然我们需要使用 babel 转译 ES7 语法，那么我们就需要使用 @babel/preset-env 进行预设环境的配置，同时，我们也需要配置 babel-polyfill 进行 polyfill 的引入。

首先，我们需要安装以下依赖：

npm install @babel/preset-env babel-loader babel-core babel-polyfill --save-dev

然后，我们需要在 .babelrc 或 package.json 中进行 babel 的配置：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["transform-runtime"],
  "ignore": ["src/assets/js/lib/*.js"],
  "include": ["src"],
  "env": {
    "test": {
      "presets": ["@babel/preset-env"],
      "plugins": ["transform-runtime"],
      "ignore": ["src/assets/js/lib/*.js"],
      "include": ["src"]
    }
  }
}

由于我们使用了 preset-env，所以我们可以设置 target 参数，让 babel 只转译我们需要的指定浏览器版本。例如我们可以设置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

之后，我们需要在 entry 中引入 babel-polyfill：

module.exports = {
  entry: {
    app: ["babel-polyfill", "./src/app.js"]
  },
  //...
};

这样，我们就完成了 babel 和 polyfill 的配置，可以愉快地使用 ES7 语法了。

总结

在开发中，我们需要使用最新的语法来提高代码质量和开发效率，而使用 babel 和 polyfill 可以帮助我们快速地实现跨浏览器的兼容性。正确配置 polyfill，可以让我们避免一些在使用不能完全支持某些 ECMAScript 特性的浏览器时可能出现的错误。希望这篇文章对你有所帮助，祝你使用愉快！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b750c9add4f0e0fffe19f5