简单搭建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越来越深入学习，对转换工具的掌

握也越来越全面和熟练。