一、兼容情况
说到 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
正常运行,会弹出 "张三",如果报错我们就知道是浏览器出现了兼容问题。当浏览器不支持
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"。
四、使用 Traceur 转码器直接插入网页的方法来转码 ES6
在网页头部加载 Traceur 库文件。
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 越来越深入学习,对转换工具的掌
握也越来越全面和熟练。
来源: https://www.cnblogs.com/toggle/p/8232947.html