教你如何快速让浏览器兼容es6

写在正文前，原本这一节的内容应该放在第二节更合适，由于当时就有同窗问ES6的兼容性如何，如何在浏览器兼容ES6的特性，这节会介绍一个抱砖引玉的操做案例。

 

为何ES6会有兼容性问题？

 

因为广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布，而到了今天，咱们在编程中若是使用了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器确定没法识别咱们的ES6代码，比如浏览器根本看不懂我写的let和const是什么东西？只能报错了。这就是浏览器对ES6的兼容性问题。

好消息

哪里有灾难，哪里就有勇士和救兵，针对ES6的兼容性问题，不少团队为此开发出了多种语法解析转换工具，把咱们写的ES6语法转换成ES5，至关于在ES6和浏览器之间作了一个翻译官。比较通用的工具方案有babel，jsx，traceur，es6-shim等。

 

此外，浏览器自身也加快速度兼容ES6的新特性，其中对ES6新特性最友好的是Chrome和Firefox浏览器。

 

各大转换工具、javascript解析引擎对ES6的支持程度状况，能够参查看这个地址：

'http://kangax.github.io/compat-table/es6/'

 

坏消息

 

即便浏览器对ES6新特性开始渐渐支持，可是这还须要很长一段时间，咱们不能百分百依赖浏览器自己对ES6的支持度来开发。

 

虽然出现了各类转换工具，可是到目前为止，尚未一款工具能百分百将ES6的新特性完美地转换成ES5，由于在ES6新增的内容中，存在一些没法在ES5中找到与之匹配的语法，因此不建议在生产环境中使用支持度较低的新特性，后续的教程章节中介绍的新特性前端君也会特地提醒它的兼容性。

 

学习热情不减

 

可是，这并不影响咱们学习ES6的热情，由于ES6是将来的标准，浏览器支持只是早晚的事。

 

本节介绍其中一个转换工具的安装和使用状况，安装使用以简单为主，主要是让新手和刚接触的同窗对转换工具备感性的认知。再次代表，即便使用了转换工具，咱们仍是不建议在生产环境大量地使用ES6的特性。

 

使用转换工具babel

 

咱们选择Babel做为学习和讲解的工具，以及最多人使用的windows做为操做系统。

 

接下来的前端君建议你打开电脑，跟着教程一步步操做。（没有也没关系，先收藏此文）

步骤1：制做ES6文件

新建一个html文件，取名为：ES6.html，加上含有ES6新特性的代码，好比：

  <script>        const Name = '张三';//使用新增的关键字：const声明常量        alert(Name);    </script>

 

 

步骤2：测试const兼容性

咱们在chrome浏览器（版本不能过低）运行ES6.html，会正常运行，弹出“张三”。

 

接下来咱们运行在IE 9，会看到这样的状况：

 

IE 9浏览器会提示咱们第9行出现一个语法错误，至关于告诉咱们它看不懂const是什么鬼，可是学过ES6入门系列第三节的咱们都知道const是ES6的新增关键字，用于声明一个常量。这个时候咱们知道const在IE9浏览器出现了兼容性问题了。

 

 

 

 

下面咱们开始用Babel来兼容它。

 

咱们可使用npm来安装babel，npm是随同Nodejs一块儿安装的包管理工具，新版的nodejs已经继承了npm，咱们只要安装nodejs便可。对于nodejs的安装，不在本节的学习范围，我就不做展开说明了..........才怪。（说好的简单易懂，前端君怎么会半途掉链子）

 

步骤3：安装node

 

来，没安装过的node的同窗，咱们来一块儿安装：

 

node官网（下载安装包.msi）：https://nodejs.org/

 

（nodejs官网首页截图）

 

咱们点击v4.4.5LTS进行下载，下载后找到node-v4.4.5-x64.msi双击运行,点击next（下一步）安装便可。期间你能够自定义选择安装的位置，默认是C:\ProgramFiles\。最后一步点击 Finish（完成）按钮退出安装向导。

 

步骤4：检测node是否安装成功

 

安装结束后，咱们检测是否安装成功：

点击 “开始”-> “运行”-> 输入“cmd”-> 进入命令提示符窗口，输入“node --version”来检测当前node的版本。

 

出现：v4.4.5就表示安装成功，由于咱们下载的就是v4.4.5LTS。

 

步骤5：用npm安装babel

 

好了，node安装好了，也就是它集成的npm包管理工具也安装好了，接下来，咱们利用npm来安装咱们最想要的babel。

 

一样咱们启动命令提示符窗口而且输入：npm install babel-core@5，而后回车，这里要稍等片刻：

 

 

看到上面的界面就是表示你安装babel成功，你会在电脑盘中找到这样的目录：C:\Users\Administrator\node_modules\babel-core，打开后你会看到：

 

 

在这个目录里面咱们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)。

 

步骤6：使用babel

 

而后咱们将这个文件使用在咱们的ES6.html中。

 <script src="browser.min.js"></script>    <script type="text/babel">        const Name = '张三';//使用新增的关键字：const声明常量        alert(Name);    </script>

 

咱们把browser.min.js引入（文件位置的路径要确保正确）。而且设置第二个script标签的type为”text/babel”。

 

 

步骤7：让const运行在IE9浏览器上

 

而后咱们再在IE9浏览器上运行一下：

 

这个时候IE9能正常运行咱们的ES6新特性了，也就是babel转换起做用了，讲const转换成IE9能执行的代码了。

 

 

这节内容操做教学的比较多，属于很干的干货，不少东西没有展开讲解，好比：node是什么？命令提示符怎么操做等问题，对于刚刚接触编程的新手来讲，若是看不懂或者不少不理解也不要紧，不会阻碍后面章节的学习，由于你可使用Chrome或者Firefox浏览器进行学习和练习，在这两款浏览器上能够执行大部分的ES6新特性，不须要使用相似babel的转换工具。

 

这一节的讲解只是做为一个学习的入门案例，起到抛砖引玉的做用，让新手们能对ES6的兼容问题和babel转换工具备个感性认知，并无覆盖全部兼容方案的介绍，之后的开发中咱们必定会发现更多关于ES6特性的坑，也会找到更多相对应的解决办法。填上这些坑，就是进步的表现。

 

本节总结

总结：目前，浏览器和转换工具并无百分百支持ES6的所有新特性，但并不影响你们对ES6的学习热情，由于这是将来的行业标准，前端开发者必须掌握的技能；而今天介绍的babel就是目前对 ES6 的支持程度较高，使用普遍的ES6转码器。

ES6这一系列我一直再出,按部就班.喜欢这篇文章的能够看看个人其余这一系列文章.

 

更多前端学习内容文章干货请关注个人专栏(不断更新)

阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶

在这里我给你们准备了不少的学习资料

其实你与阿里工程师的差距只差这些东西