前言

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. 优先队列Priority Queue和堆Heap

    对COMP20003中的Priority queue部分进行总结.图片来自于COMP20003 queue队列,顾名思义特点先进先出 priority queue优先队列,出来的顺序按照优先级prio ...

  2. 企业推动移动化战略中为什么需要Moli？

    随着科技的进步,计算能力程指数上升,引爆人工智能的大发展,人类社会开始步进入智能时代.与此同时,端能力将演进到第三代,全面参与智能边缘计算,从PC互联到移动互联到万物互联,历史在快速演进:主流技术向物 ...

  3. 图解从 URL 到网页通信原理

    前言 一.文本对话--从请求到响应 二.TCP/IP 协议族介绍 三.基于TCP/IP通信过程 四.TCP建立连接及断开(重点补充) 小结 前言 互联网的原始目的,就是为了传输文本(文本对话).那我们 ...

  4. React Fullpage

    之前项目需要,单独拿出来做了个demo 目前仅支持收尾加autoheight github地址:https://github.com/zlinggnilz/React-Fullpage

  5. django-haystack全文检索

    一:使用的工具haystack是django的开源搜索框架,该框架支持Solr,Elasticsearch,Whoosh, *Xapian*搜索引擎,不用更改代码,直接切换引擎,减少代码量.搜索引擎使 ...

  6. BZOJ 1815: [Shoi2006]color 有色图（Polya定理）

    题意 如果一张无向完全图(完全图就是任意两个不同的顶点之间有且仅有一条边相连)的每条边都被染成了一种颜色,我们就称这种图为有色图. 如果两张有色图有相同数量的顶点,而且经过某种顶点编号的重排,能够使得 ...

  7. Django学习目录

    Django学习目录 Django框架简介 Django基础 >>点我 ORM介绍 Django中ORM介绍 >>点我 ORM表操作 Django中ORM表相关操作 >& ...

  8. 修改linux下yum镜像源为国内镜像

    修改为163yum源-mirrors.163.com 1.首先备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repo [root@localhost ~]# m ...

  9. ddt运行测试方法时报错AttributeError: type object 'TestHttpRq' has no attribute 'test_http_rq_login'

    import unittest import ddt #装饰器 from ddt import ddt,data,unpack #导入ddt中的各个模块 from homework.unittest_ ...

  10. Borůvka algorithm

    Borůvka algorithm 我好无聊啊,直接把wiki的算法介绍翻译一下把. wiki关于Borůvka algorithm的链接:链接 Borůvka algorithm是一个在所有边权都是 ...