ES6的转换器

---恢复内容开始---

  ES6代码转为ES5代码的转换器

1.Babel

2.Traceur，Google公司出品

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看：

Babel转码器

Babel是另一个广泛使用的ES6转码器，安装命令如下。

$ npm install --global babel

Babel自带一个 babel-node 命令，与Node命令行完全一致，而且可以直接运行ES6代码。

$ babel-node
> > console.log([1,2,3].map(x => x * x)) [ 1, 4, 9 ] >

babel-node 命令也可以直接运行ES6脚本。假定将上面的代码放入脚本文件 es6.js 。

$ babel-node es6.js [1, 4, 9]

babel 命令可以将ES6代码转为ES5代码。

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

$ babel es6.js -o es5.js

Traceur转码器

Google公司的Traceur转码器，可以将ES6代码转为ES5代码。这意味着，你可以用ES6的方式编写程序，又不用担心浏览器是否支持。

它有多种使用方式。

直接插入网页

Traceur允许将ES6代码直接插入网页。

首先，必须在网页头部加载Traceur库文件。

<!-- 加载Traceur编译器 -->
<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script> <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script> <!-- 将Traceur编译器用于网页 --> <script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script>

接下来，就可以把ES6代码放入上面这些代码的下方。

<script type="module"> class Calc { constructor(){ console.log('Calc constructor'); } add(a, b){ return a + b; } } var c = new Calc(); console.log(c.add(4,5)); </script>

正常情况下，上面代码会在控制台打印出9。

注意，script标签的type属性的值是module，而不是text/javascript。这是Traceur编译器识别ES6代码的标识，编译器会自动将所有type=module的代码编译为ES5，然后再交给浏览器执行。

如果ES6代码是一个外部文件，也可以用script标签插入网页。

<script type="module" src="calc.js" ></script>

在线转换

Traceur提供一个在线编译器，可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为ES5代码插入网页运行。

上面的例子转为ES5代码运行，就是下面这个样子。

<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script> <script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script> <script> traceur.options.experimental = true; </script> <script> $traceurRuntime.ModuleStore.getAnonymousModule(function() { "use strict"; var Calc = function Calc() { console.log('Calc constructor'); }; ($traceurRuntime.createClass)(Calc, {add: function(a, b) { return a + b; }}, {}); var c = new Calc(); console.log(c.add(4, 5)); return {}; }); </script>

最近在学习es6的一些东西，分享给大家。
转化器的一些说明转载：https://blog.gaoqixhb.com/p/55783789cef7e0a008d5d6ef

---恢复内容结束---

转载于:https://www.cnblogs.com/weiyz/p/7130624.html