Traceur 使用方式

ES6于2015年6月正式发布,各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。

目前各大浏览器和开发环境对支持ES6的支持情况参差不齐,在实际项目开发中,我们仍旧不得不降级使用ES5语法以兼容各平台。幸好有几款工具可以将ES6语法转换成ES5,让我们在使用ES6新特性编写代码的同时,不需要考虑具体的兼容性情况。

将ES6代码转换成ES5代码工具中最主流的有以下两个:

Traceur(Google研发); Babel

下面介绍这两个工具的使用方法,以及Node.js中对ES6的支持情况。

一. Traceur转换器

1)第一种方法:直接在页面中使用:


<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript">script>

<script>
    traceur.options.experimental = true;
script>

写ES6代码,用:

<script type="module">
    // ES6代码
script>

注意,script标签的type属性的值是module,而不是text/javascript。这是Traceur编译器识别ES6代码的标识。

2) 第二种方法:Traceur的在线编辑器:

http://google.github.io/traceur-compiler/demo/repl.html

3) 第三种方法:使用node.js工具:

安装:

$ npm install -g traceur

直接运行ES6代码:

$ traceur calc.js

将ES6输出为ES5脚本:

$ traceur --script calc.es6.js --out calc.es5.js

为了防止有些特性编译不成功,最好加上–experimental选项。

$ traceur --script calc.es6.js --out calc.es5.js --experimental

二. Babel转换器

1) 安装:

$ npm install --global babel

2) 直接运行ES6脚本:

$ babel-node es6.js

3) 将ES6编译成ES5:

$ babel es6.js

-o 参数将转换后的代码,从标准输出导入文件:

$ babel es6.js -o es5.js

三. Node.js支持ES6的情况:

Google公司的V8引擎已经部署了ES6的部分特性。使用Node.js 0.11版,就可以体验这些特性。在 Node.js 使用的 JS 引擎 V8 里面将不同状态 ES6 特性分成了 3 个等级:

  • shipping (默认开启的特性)
  • staged (需要使用 –harmony 参数开启的特性)
  • in progress(不稳定或者未实现的特性, 不推荐使用)

Node v4.4.4版本对ES6的支持情况如下:

Traceur 使用方式_第1张图片 【备注:上图转自http://www.alloyteam.com/2016/07/nodejs-native-support-of-the-es6-features/】

在Node v4和 v5版本,可能需要运行node --harmony命令来打开所有已经部署的ES6功能。部分特性需要在严格模式下使用,即在文件中使用use strict

Node.js对ES6的具体支持情况可查看:

http://node.green/

参考:

JavaScript ECMA-262 规范:http://www.ecma-international.org/publications/standards/Ecma-262.htm

Node.js ES6 支持文档 https://nodejs.org/en/docs/es6/

ES6的各平台兼容性情况: https://kangax.github.io/compat-table/es6/

你可能感兴趣的:(JavaScript乱七八糟)