欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简单搭建ES6的环境

程序员文章站 2022-06-22 12:28:43
一、兼容情况 说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况。ES5浏览器支持情况: Opera 11.60;Internet Explorer 9*;Firefox 4;Safari 5.1**;Chrome 13* IE9不支持严格模式 — IE10 添加 ......

一、兼容情况

说到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越来越深入学习,对转换工具的掌
握也越来越全面和熟练。