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 ...
随机推荐
- UVA 10391 - Compound Words 字符串hash
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- C语言深度剖析-----函数
认清函数的真面目 函数的意义 面向过程的程序设计 函数声明和定义 函数参数 编写代码的时候,不要编写类似先后调用的代码 f(k,k++) C语言中的顺序点 a--&&a ,& ...
- Ansible 管理服务和软件
[root@Ansible ~]# ansible RAC -m yum -a 'name=iscsi-initiator-utils state=installed' RAC_Node1 | suc ...
- (转)nginx的root和alias指令的区别
转自 http://www.cnblogs.com/tintin1926/archive/2012/07/11/2586813.html nginx配置下有两个指定目录的执行,root和alias ...
- BI并不是万能，中层业务管理报表要另辟蹊径
BI是商业智能的缩写,是能够帮助企业做出明智的业务经营决策的工具.其数据来源于各个业务系统.如ERP.CRM.SCM.进销存.HER.OA等. BI系统不同于传统的管理信息 ...
- AOP技术应用和研究--OOP
1,软件编程技术的发展 软件编程技术与程序设计语言是分不开的.过去的几十年中,程序设计语言对抽象机制的支持程度不断提高:从机器语言到汇编语言,到高级语言,再到面向对象语言.每一种新的程序设计语言的出现 ...
- ocx 中使用CImage和CComPtr
#include <atlimage.h> using namespace ATL;
- 【例题3-6 UVA - 1584】Circular Sequence
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 不用真的把每一位都取出来. 用一个后缀的思想. 把原串复制一遍接在后面,然后把每个字符串 都当成一个长度为n的后缀就好了. 比较每个 ...
- Android基础新手教程——1.2 开发环境搭建
Android基础新手教程--1.2 开发环境搭建 标签: Android基础新手教程 如今主流的Android开发环境有: ①Eclipse + ADT + SDK ②Android Studio ...
- 数据类型总结——Boolean类型（布尔类型）
相关文章 简书原文:https://www.jianshu.com/p/e5c75d4be636 数据类型总结——概述:https://www.cnblogs.com/shcrk/p/9266015. ...