前言

preset与plugin的关系:

  • preset中已经包含了一组用来转换ES6+的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的转换插件
  • babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill

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

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

  • 使用方法

    • 缺啥补啥,在package.json添加所需的依赖babel-plugin-transform-xxx
    • 在.babelrc中的plugins项指定使用babel-plugin-transform-xxx插件
    • 代码中不需要显式import/require, .babelrc中不需要指定useBuiltIns, webpack.config.js中不需要做额外处理,一切由babel插件完成转换
  • 优点
    • 作用域是模块,避免全局冲突
    • 是按需引入,避免不必要引入造成及代码臃肿
  • 缺点
    • 每个模块内单独引用和定义polyfill函数,造成了重复定义,使代码产生冗余

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

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

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

  • 使用方法

    • package.json中添加依赖babel-plugin-tranform-runtime以及 babel-runtime
    • .babelrc中配置插件:"plugins": ["transform-runtime"]
    • 接下来, 代码中可以直接使用ES6+的新特性,无需import/require额外东西, webpack也不需要做额外配置
  • 优点
    • 无全局污染
    • 依赖统一按需引入(polyfill是各个模块共享的), 无重复引入, 无多余引入
    • 适合用来编写lib(第三方库)类型的代码
  • 缺点
    • 被polyfill的对象是临时构造并被import/require的,并不是真正挂载到全局
    • 由于不是全局生效, 对于实例化对象的方法,如[].include(x), 依赖于Array.prototype.include仍无法使用

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

  • 使用方法

    • 法3.1: (浏览器环境)单独在html的<head>标签中引入babel-polyfill.js(CDN或本地文件均可)
    • 法3.2: 在package.json中添加babel-polyfill依赖, 在webpack配置文件增加入口: 如entry: ["babel-polyfill",'./src/app.js'], polyfill将会被打包进这个入口文件中, 而且是放在文件最开始的地方
    • 法3.3: 在package.json中添加babel-polyfill依赖, 在webpack入口文件顶部使用import/require引入,如`import 'babel-polyfill'``
  • 优点
    • 一次性解决所有兼容性问题,而且是全局的,浏览器的console也可以使用
  • 缺点
    • 一次性引入了ES6+的所有polyfill, 打包后的js文件体积会偏大
    • 对于现代的浏览器,有些不需要polyfill,造成流量浪费
    • 污染了全局对象
    • 不适合框架或库的开发

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

  • 使用方法

    • packge.json引入依赖babel-preset-env
    • .babelrc中使用配置preset-env
    • 指定useBuiltins选项为true
    • 指定浏览器环境或node环境, 配置需要兼容的浏览器列表
    • 在webpack入口文件中使用import/require引入polyfill, 如import 'babel-polyfill'
    • 以上配置完成之后, babel会根据指定的浏览器兼容列表自动引入所有所需的polyfill, 不管你代码中有没有使用
  • .babelrc示例
{

  "presets": [

    ["env", {

      "modules": false,

      "targets": {

        "browsers": ["ie >=9"]

      },

      "useBuiltIns": true,

      "debug": true

    }]

  ]

}
  • 优点

    • 按需(按照指定的浏览器环境所需)引入polyfill, 一定程度上减少了不必要polyfill的引入

    • 配置简单, 无需对webpack做额外的配置

    • 注意:

      • 不可与方法3混用,否则会引起冲突
      • 全局方式要保证polyfill在所有其它脚本之前被执行(首行import或者设置为html的第一个<head>标签)

5. polyfill.io

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

作者：荣儿飞
链接：https://www.jianshu.com/p/3b27dfc6785c
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

babel-polyfill的几种使用方式的更多相关文章

  1. emitted value instead of an instance of error the scope attribute for scoped slots webpack babel polyfill

    api20180803.vue emitted value instead of an instance of error the scope attribute for scoped slots h ...

  2. Web APi之认证（Authentication）两种实现方式【二】（十三）

    前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...

  3. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  4. Android中BroadcastReceiver的两种注册方式（静态和动态）详解

    今天我们一起来探讨下安卓中BroadcastReceiver组件以及详细分析下它的两种注册方式. BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来 ...

  5. Android中Fragment与Activity之间的交互（两种实现方式）

    (未给Fragment的布局设置BackGound) 之前关于Android中Fragment的概念以及创建方式,我专门写了一篇博文<Android中Fragment的两种创建方式>,就如 ...

  6. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  7. 通过三个DEMO学会SignalR的三种实现方式

    一.理解SignalR ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信(即:客户端(Web页面)和服务器端可以互相实时的通知消息 ...

  8. Hive metastore三种配置方式

    http://blog.csdn.net/reesun/article/details/8556078 Hive的meta数据支持以下三种存储方式,其中两种属于本地存储,一种为远端存储.远端存储比较适 ...

  9. Hive的三种安装方式（内嵌模式，本地模式远程模式）

    一.安装模式介绍:     Hive官网上介绍了Hive的3种安装方式,分别对应不同的应用场景.     1.内嵌模式(元数据保村在内嵌的derby种,允许一个会话链接,尝试多个会话链接时会报错)   ...

  10. HashMap两种遍历方式的深入研究

    转自:http://swiftlet.net/archives/1259 HashMap的遍历有两种方式,如下所示:第一种利用entrySet的方式:   1 2 3 4 5 6 7 Map map ...

随机推荐

  1. [题解] Codeforces Round #549 (Div. 2) B. Nirvana

    Codeforces Round #549 (Div. 2) B. Nirvana [题目描述] B. Nirvana time limit per test1 second memory limit ...

  2. Photoshop调出田园照片唯美手绘油画效果

    先看看效果图 原片分析:妹子脸上的光不够通透,有些灰暗,整体色调不够分明. 后期思路:色彩往油画风格调整,让画面色彩更加油润.丰富. 基础调整 (1)曝光根据照片的实际情况进行调整 (2)增加阴影部分 ...

  3. VS + QT 出现 LNK2001 无法解析的外部符号 QMetaObject 的问题

    在一个QT项目中新建一个带QObject定义的类后 (不是继承),可能会出现LNK2001 的错误,这是由于IDE没有自动为新建的类生成 moc_XXXX.cpp 文件导致的. 一种做法是手动生成mo ...

  4. css浮动学习

    以前网页中的局都是使用浮动来实现的(毕竟ie9也不支持flex-box).而浮动在css中是一个挺难理解的概念,这次再巩固一下,float的具体使用事项. 1.行内元素和块元素的区别? 行内元素(im ...

  5. 搭建Eureka注册中心

    创建一个Spring Boot工程,命名为eureka-server,并在pom.xml中引入必要的依赖,代码如下. <parent> <groupId>org.springf ...

  6. dp回文

    .dp回文子串 通常在dp数组中存放的是 从i到j是否是回文子串 1.动态规划 2.中心扩展法 #include<iostream> #include<algorithm> # ...

  7. ILRuntime_NewbieGuide—进阶

    进阶篇其实要求你应该拥有一个云服务器才有意思,但你用本地电脑也是一样的道理,只是没有这么有趣了. 笔者大一的时候,腾讯云搞活动,学生认证可以抢到1元的云主机,配置很低,但是平时练练手还是可以的,现在没 ...

  8. js-sha256源码

    /** * [js-sha256]{@link https://github.com/emn178/js-sha256} * * @version 0.9.0 * @author Chen, Yi-C ...

  9. github+jekyll个人博客搭建

    Thanks to https://blog.csdn.net/Hanghang_/article/details/78944672 跟着这个博客一步步搭建,从jekyll官网上找到自己喜欢的主题. ...

  10. golang中使用Redis

    一.golang中安装Redis github地址:https://github.com/garyburd/redigo 文档地址:http://godoc.org/github.com/garybu ...