@babel/polyfill按需加载

2,899 阅读1分钟

为什么要用polyfill

babel帮我们编译es6语法,但是像Promise、async、await...这些语法是编译不了的,那么我们就得用到polyfill了。

安装及配置

npm i @babel/polyfill
.babelrc
{
  "presets": [
    ["@babel/preset-env", {
      // 按需注入
      "useBuiltIns": "usage",
      "corejs": 2 // 这里需要注意:是根据你的版本来写
    }]
  ]
}

需要注意的是我这里没有写基础的babel安装和配置,自行安装~

@babel/plugin-transform-runtime

当我们开发的是组件库、工具库这些场景polyfill就不合适了,因为polyfill是注入到全局变量window下的,会污染全局环境,所以推荐闭包方式:@babel/plugin-transform-runtime

安装及配置

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime @babel/runtime-corejs2
// .babelrc 
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

试试~