babel-polyfill的几种使用方式
in Nodejs with 0 comment

babel-polyfill的几种使用方式

in Nodejs with 0 comment

前言

preset与plugin的关系:

例如,默认情况下babel可以将箭头函数,class等语法转换为ES5兼容的形式,但是却不能转换Map,Set,Promise等新的全局对象,这时候就需要使用polyfill去模拟这些新特性

1. 使用转换插件: babel-plugin-transform-xxx

使用方法:

优点:

缺点:

配置完一个转换插件后, 代码中每个使用这个API的地方的代码都会被转换成使用polyfill中实现的代码

2. 使用插件 babel-runtime 与 babel-plugin-tranform-runtime

相比方法1, 相当于抽离了公共模块, 避免了重复引入, 从一个叫core.js的库中引入所需polyfill(一个国外大神用ES3写的ES5+ polyfill)

使用方法:

优点:

缺点:

3. 全局babel-polyfill(不使用useBuiltIns)

使用方法:

优点:

缺点:

4. 全局babel-polyfill(使用babel-preset-env插件和useBuiltIns属性)

使用方法:

babelrc示例:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["ie >=9"]
      },
      "useBuiltIns": true,
      "debug": true
    }]
  ]
}

优点:

5. polyfill.io

一个CDN方式提供的polyfill, 可根据浏览器UserAgent自动返回合适的polyfill, 详细内容自行google。

转自babel-polyfill的几种使用方式

Responses