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 ...
随机推荐
- iCarousel——在iOS和Mac OS应用中实现3D CoverFlow旋转木马效果的开源类库
前言 iCarousel一个简单.可高度定制的3D CoverFlow开源类库,旨在简化在 iPhone, iPad和Mac OS中生成各种类型的cover flow(视图切换)效果(分页.滚动视图) ...
- P2P借款的几种情况
借款,至少出现2种人,借款人和出借人.根据人的性质,企业和个人,分成4种情况. 企业-个人,企业-企业,个人-企业,个人-个人. P2P平台可能出现几种情况: 个人-个人 2种情况: a. 借款人 ...
- Visual studio编译器窗体重置
针对vs2003: 第一种方法 在"工具"->"选项"对话框里面: 在"选项"以下的"常规"有个"重置 ...
- js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
- Machine-learning of Andrew Ng
Machine-learning of Andrew Ng 1.基础概念 机器学习是一门研究在非特定编程条件下让计算机采取行动的学科.最近二十年,机器学习为我们带来了自动驾驶汽车.实用的语音识别.高效 ...
- popen：让进程看似文件
popen打开一个指向进程的带缓冲的连接: FILE *fp; fp = popen("ls", "r"); fgets(buf, len, fp); pclo ...
- 如何使用google地图的api（整理）
如何使用google地图的api(整理) 一.总结 一句话总结:直接用script标签引google地图api即可. 1.如何使用google地图的api? 页面引用javascript文件<s ...
- 快速杀死占用8080端口进程的批处理（kill-8080.bat）
@echo off setlocal enabledelayedexpansion for /f "delims= tokens=1" %%i in ('netstat -aon ...
- POJ 2185 Milking Grid KMP循环节周期
题目来源:id=2185" target="_blank">POJ 2185 Milking Grid 题意:至少要多少大的子矩阵 能够覆盖全图 比如例子 能够用一 ...
- 【solr专题之二】配置文件：solr.xml solrConfig.xml schema.xml 分类： H4_SOLR/LUCENCE 2014-07-23 21:30 1959人阅读 评论(0) 收藏
1.关于默认搜索域 If you are using the Lucene query parser, queries that don't specify a field name will use ...