ES6转ES5，Traceur使用方式

article/2025/10/14 19:09:57

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）第一种方法：直接在页面中使用：

<!-- 加载Traceur编译器 -->
<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的支持情况如下：

image_1ap049cqqj0ualnucjun91rfu9.png-43.8kB 【备注：上图转自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/