简单搭建ES6的环境

一、兼容情况

说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况。ES5浏览器支持情况:
Opera 11.60;Internet Explorer 9*;Firefox 4;Safari 5.1**;Chrome 13
* IE9不支持严格模式 — IE10 添加
** Safari 5.1 仍不支持 Function.prototype.bind, 尽管Function.prototype.bind现在已经被
Webkit所支持。

具体ES5、ES6各浏览器支持情况可以查看
ECMAScript5:http://kangax.github.io/compat-table/es5/
ECMAScript6:http://kangax.github.io/compat-table/es6/

二、兼容方法

针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把ES6语法转换成ES5。
比较通用的工具方案有babel,traceur,jsx,es6-shim等。
此外,浏览器自身也加快速度兼容ES6的新特性,其中对ES6新特性最友好的是Chrome和Firefox
浏览器。在使用ES6时,先不用引入任何东西,去测试,因为现在浏览器已经支持部分ES6功能,有的
不需要转码,转码反而错误。
我们用下面的代码去测试浏览器是否兼容ES6语法const
<script>
const Name = '张三';//使用新增的关键字:const声明常量
alert(Name);
</script>

正常运行,会弹出“张三”,如果报错我们就知道是浏览器出现了兼容问题。当浏览器不支持
ES6时,再用Babel和Traceur对ES6进行转码。

三、使用Babel来兼容

使用npm来安装babel,npm是和Nodejs一起安装的包管理工具,新版的nodejs已经继承了npm,我
们只要安装nodejs即可。在node官网下载后缀为msi的最新安装包,下载后找到文件双击运行,点击下
一步安装即可,期间可以自定义选择安装的位置,默认是C:\ProgramFiles\。启动命令提示符窗口,
输入“node --version”来检测当前node的版本,当有版本号显示说明Node成功安装。
下面我们用npm安装babel,启动命令提示符窗口并且输入:npm install babel-core@5,然后回
车,安装成功后,打开目录:C:\Users\Administrator\node_modules\babel-core,在这个目录里面
我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)。把browser.min.js
引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。
<script src="browser.min.js"></script>
<script type="text/babel">
const Name = '张三';
alert(Name);
</script>

四、使用Traceur转码器直接插入网页的方法来转码ES6

在网页头部加载Traceur库文件。
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">
const Name = '张三';
alert(Name);
</script>

1.traceur:是由Google出的编译器,可以将ES5编译成ES6
2.bootstrap:是一个引导程序(与响应式的bootstrap不同)
3.需要将traceur.js和bootstrap.js下载下来,引入到当前文件中即可
4.最后的script标签的type属性的值是module,而不是text/javascript。这是Traceur编译器识别
ES6代码的标志,编译器会自动将所有type=module的代码编译为ES5,然后再交给浏览器执行。

五、另外还有Babel转码器的其他使用方法,Traceur的命令行转换方法和Node.js环境的用法,这里的
方法只是作为一个学习的入门案例,起到抛砖引玉的作用,让新手们能对ES6的兼容问题和转换工具
有个认识,并没有覆盖所有兼容方案的介绍,希望大家随着对ES6越来越深入学习,对转换工具的掌
握也越来越全面和熟练。

posted @ 2018-01-07 23:55  林木慕风  阅读(394)  评论(0编辑  收藏  举报