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

---恢復內容結束---