Babel与Polyfill的关系和区别
推荐阅读 Babel教程
以下是2018年1月的旧文
----------------------------------------------------------------
很多同学搞不清楚babel与polyfill的关系以及区别，这儿给大家细致解惑。
Babel:Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码。注意：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API。有的同学可能分不清哪些是ES6句法，哪些是API，这个暂时先放一放，后面会讲。
Polyfill:Polyfill的准确意思为，用于实现浏览器并不支持的原生API的代码。
下面用一个例子来讲：
//使用babel转码前的代码
require('babel-polyfill');
(x => x * 2)(1);
var b = Array.of(1,2,4);
//使用babel转码后的代码
'use strict'; require('babel-polyfill');
(function (x) {
return x * 2;
})(1);
var b = Array.of(1, 2, 4);
这个例子中，Babel转换了ES6的箭头函数句法，但对于Array.of并没有转换，因为Array.of是ES6的API。有些同学可能还是不清楚哪些是句法，哪些是API，这个不要紧，我是新人的时候也是花了很长时间才理解的，需要多写代码慢慢体会，潜移默化。对于什么是API，讲一个例子帮助大家理解吧。
if (!Array.of) {
Array.of = function() {
return Array.prototype.slice.call(arguments);
};
我们都知道Array是ES5就存在的一个对象了，但是该对象没有of方法，这个方法就是一个API，但ES6有这个API了。对于不支持ES6的浏览器，我们通过引入babel-polyfill使其支持ES6的API，类似于上面的代码来实现的。
下面再给一个现实的例子：
我在旧版浏览器（火狐23.0，2013年发布的）打开下面的页面直接报错（新版的Chrome和火狐不会报错，这两个已经支持ES6）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <script type="text/javascript" src="polyfill.js"></script> -->
<script type="text/javascript">
var b = Array.of(1, 2, 4);
console.log(b)
</script>
</body>
</html>
当把Babel官网提供的polyfill.js（就是babel-polyfill）引入后，即反注释上面代码中已经注释掉的polyfill.js，就可以正常运行了。
另外，还有些同学要问，require()怎么转换成ES5啊？其实，浏览器里这个通过Babel是不能转换的，要通过webpack等打包工具把代码打包用。
Babel与Polyfill的关系和区别的更多相关文章
- 转义BABEL的POLYFILL和RUNTIME的区别
babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps.Proxy.Refl ...
- webpack，Babel，babel-loader的关系
本文将要介绍 webpack,Babel,babel-loader 的关系.理清楚他们各自做了什么事情. 通常我们新建一个项目,会先配置webpack,然后配置babel:babel是一个编译工具,实 ...
- paip.java 以及JavaScript (js) 的关系以及区别
paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...
- 【转载】OLE DB, ADO, ODBC关系与区别
原文:OLE DB, ADO, ODBC关系与区别 OLE DB, ADO, ODBC 一. ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(W ...
- CPU MPU MCU SOC SOPC关系及区别
在嵌入式开过程,会经常接触到一些缩写术语概念,这些概念在嵌入式行业中使用率非常高,下面我们就解释一下这些概念之间的关系和区别: 1.CPU(Central Processing Unit),是一台计算 ...
- android 点滴记录 ICCID IMSI IMEI MEID 关系 和 区别，相关参数在什么情况下可以获取...
1:ICCID:Integrate circuit card identity 集成电路卡识别码(固化在手机SIM卡中) ICCID为IC卡的唯一识别号码,共有20位数字组成,其编码格式为:XXXXX ...
- Linux 库函数与系统调用的关系与区别
上周总结了<C 标准库的基础 IO>,其实这些功能函数通过「系统调用」也能实现相应功能.这次文章并不是要详细介绍各系统调用接口的使用方法,而是要深入理解「库函数」与「系统」调用之间的关系和 ...
- UIView的alpha、hidden和opaque属性之间的关系和区别[转]
UIView的alpha.hidden和opaque属性之间的关系和区别 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/ ...
- Flex,Flash,AS3,AIR的关系和区别
转自:http://www.admin10000.com/document/156.html 本文详细介绍了 Flash.Flex.AS3.AIR 的关系和区别.希望对初学者有帮助. AS3 Acti ...
随机推荐
- QQ在线交谈代码
非常多商业站点的右边都会有一个固定或者浮动的层显示QQ在线在线交谈或者咨询的button.当浏览者点击了就会弹出相应的对话框. 这里的QQ交谈有两种: 一种是企业QQ,那要生成以上的功能就非常easy ...
- nios博文
小时不识月:http://www.cnblogs.com/yuphone/archive/2010/09/20/1831448.html cracy bingo:http://www.cnblogs. ...
- 支付宝支付返回通知时 notify_url和return_url的选择
页面跳转同步通知页面特性(return_url特性) 买家在支付成功后会看到一个支付宝交易提示成功的页面,该页面会停留几秒,然后会自动跳转回商户指定的同步通知页面(参数return_url) 该页面中 ...
- 《JavaScript高级程序设计》笔记——第一章到第三章
2019年,新年伊始,我打算好好重读一下<JavaScript高级程序设计>这本前端必备经典书.每天半小时. 以下内容摘自<JavaScript高级程序设计> 2019-2-1 ...
- 表单提交数据格式form data
前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交 ...
- HDU 1394 Minimum Inversion Number（线段树求最小逆序数对）
HDU 1394 Minimum Inversion Number(线段树求最小逆序数对) ACM 题目地址:HDU 1394 Minimum Inversion Number 题意: 给一个序列由 ...
- LA 3942 - Remember the Word 字典树+DP
看题传送门:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show ...
- 解读AFNetworking中Demo的MVC
Demo的下载地址:AFNetworking下载 打开Demo: 现实的功能.就是一个简易的微博timeline界面: 项目预览: 用到的第三方:AFNetworking 和 UIKit+AFNetw ...
- Nutch的日志系统 分类： H3_NUTCH 2015-02-17 20:14 261人阅读 评论(0) 收藏
一.Nutch日志实现方式 1.Nutch使用slf4j作为日志接口,使用log4j作为具体实现.关于二者的基础,请参考 http://blog.csdn.net/jediael_lu/article ...
- DIKW模型与数据工程（了解）
DIKW 体系 DIKW体系是关于数据.信息.知识及智慧的体系,可以追溯至托马斯·斯特尔那斯·艾略特所写的诗--<岩石>.在首段,他写道:"我们在哪里丢失了知识中的智慧?又在哪里 ...