推荐阅读 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的关系和区别的更多相关文章

  1. 转义BABEL的POLYFILL和RUNTIME的区别

    babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps.Proxy.Refl ...

  2. webpack，Babel，babel-loader的关系

    本文将要介绍 webpack,Babel,babel-loader 的关系.理清楚他们各自做了什么事情. 通常我们新建一个项目,会先配置webpack,然后配置babel:babel是一个编译工具,实 ...

  3. paip.java 以及JavaScript (js) 的关系以及区别

    paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  4. 【转载】OLE DB, ADO, ODBC关系与区别

    原文:OLE DB, ADO, ODBC关系与区别 OLE DB, ADO, ODBC 一. ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(W ...

  5. CPU MPU MCU SOC SOPC关系及区别

    在嵌入式开过程,会经常接触到一些缩写术语概念,这些概念在嵌入式行业中使用率非常高,下面我们就解释一下这些概念之间的关系和区别: 1.CPU(Central Processing Unit),是一台计算 ...

  6. android 点滴记录 ICCID IMSI IMEI MEID 关系 和 区别，相关参数在什么情况下可以获取...

    1:ICCID:Integrate circuit card identity 集成电路卡识别码(固化在手机SIM卡中) ICCID为IC卡的唯一识别号码,共有20位数字组成,其编码格式为:XXXXX ...

  7. Linux 库函数与系统调用的关系与区别

    上周总结了<C 标准库的基础 IO>,其实这些功能函数通过「系统调用」也能实现相应功能.这次文章并不是要详细介绍各系统调用接口的使用方法,而是要深入理解「库函数」与「系统」调用之间的关系和 ...

  8. UIView的alpha、hidden和opaque属性之间的关系和区别[转]

    UIView的alpha.hidden和opaque属性之间的关系和区别 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/ ...

  9. Flex,Flash,AS3,AIR的关系和区别

    转自:http://www.admin10000.com/document/156.html 本文详细介绍了 Flash.Flex.AS3.AIR 的关系和区别.希望对初学者有帮助. AS3 Acti ...

随机推荐

  1. Lucene 查询方式

    QueryParser类 QueryParser类对输入字符串的解析 格    式 含    义 “David” 在默认的字段中检索“David”关键字 “content:David” 在“conte ...

  2. BigBoss按键映射

    // BigBoss: SBSettings Toggle Spec 按键映射 http://thebigboss.org/guides-iphone-ipod-ipad/sbsettings-tog ...

  3. pcb过孔盖油

    pcb的过孔应该盖油,,这样,两个距离比较紧的过孔就不会在焊接的时候短路了,尤其是手工焊接小件的时候.

  4. open ball、closed ball 与 open set、closed set（interior point，limit point）、dense set

    0. demo 在拓扑学上,open set(开集)是对实数轴(real line)上开区间(open interval)的拓展. 红色圆盘:{(x,y)|x2+y2<r2},蓝色圆圈:{(x, ...

  5. POJ 2785 4 Values whose Sum is 0 Hash！

    http://poj.org/problem?id=2785 题目大意: 给你四个数组a,b,c,d求满足a+b+c+d=0的个数 其中a,b,c,d可能高达2^28 思路: 嗯,没错,和上次的 HD ...

  6. 使用Perl脚本编译Latex

    使用Perl脚本编译Latex 脚本能实现Latex文本的初级编译,并将生成的中间文件移动到同一个目录 调用方法 chmod +x xelatex2pdf.pl xelatex2pdf.pl -n 2 ...

  7. 借助gdb实现pstack

    pstack.sh: #! /bin/sh if [ -z $1 ] then echo "gdb script for print stack" echo "usage ...

  8. 是男人就下100层【第四层】——Crazy贪吃蛇（3）

    上一篇<是男人就下100层[第四层]--Crazy贪吃蛇(2)>实现了贪吃蛇绕着屏幕四周移动,这一篇我们来完成贪吃蛇的所有功能. 一.随机产生苹果 private void addAppl ...

  9. MHA 一主两从搭建-脚本VIP-自动切换

    环境介绍:主机名 IP MHA角色 MySQL角色node1 192.168.56.26 Node MySQL Master node2 192.168.56.27 Node MySQL Master ...

  10. POJ 2387 Til the Cows Come Home (Dijkstra)

    传送门:http://poj.org/problem?id=2387 题目大意: 给定无向图,要求输出从点n到点1的最短路径. 注意有重边,要取最小的. 水题..对于无向图,从1到n和n到1是一样的. ...