8月24分享-babel中使用polyfill的4种方式

• S babel中启用polyfill的方式
  官网上说的有点绕，其实总结一下可以很简单
  方法1：
  直接在入口文件中import:

  
  
  

  原始代码

编译结果

方法2：
与方法1类似，在打包工具的入口配置中指定polyfill，如使用webpack：

webpacl.config.js

1、2都比较粗暴，会把整个polyfill都引进项目。

方法3：
使用@babel/plugin-transform-runtime + @babel/runtime
@babel/runtime，负责提供polyfill。比如_classCallCheck函数，用来保证类不能直接当做一个普通函数调用
@babel/plugin-transform-runtime，负责在编译结果中，从@babel/runtime中引用这些polyfill

// babel.config.json
{
  "plugins": [ "@babel/plugin-transform-runtime" ]
}

编译结果

方法4：@babel/preset-env
通过@babel/preset-env的配置项 useBuiltIns，其默认值是false

// babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}