在瀏覽器里面如何使用？
現在ES6的使用也是一個新趨勢，下面就來講解轉碼的常見方法
當ES6不兼容時，需要用到轉碼工具
1.Babel轉碼器:
Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。
這意味着，你可以用ES6的方式編寫程序，又不用擔心現有環境是否支持。
// 轉碼前
input.map(item => item + 1);
// 轉碼后
input.map(function (item) {
return item + 1;
});
上面的原始代碼用了箭頭函數，這個特性還沒有得到廣泛支持，
Babel將其轉為普通函數，就能在現有的JavaScript環境執行了。
Babel轉碼器使用方法：
1）配置文件.babelrc
Babel的配置文件是.babelrc，存放在項目的根目錄下。
使用Babel的第一步，就是配置這個文件。
該文件用來設置轉碼規則和插件，基本格式如下。
{
"presets": [],
"plugins": []
}
presets字段設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。
# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015
# react轉碼規則
$ npm install --save-dev babel-preset-react
# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
然后，將這些規則加入.babelrc。
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
注意，以下講解的所有Babel工具和模塊的使用，都必須先寫好.babelrc。
所以使用babel的最基本目錄結構為：
|-package.json 由npm init --yes 生成
|-.babelrc 使用時需手動配置以上內容，放到項目根目錄中
|-........ 其他與項目有關的文件
Babel工具：
1）命令行轉碼babel-cli
Babel提供babel-cli工具，用於命令行轉碼。
它的安裝命令如下。
$ npm install --global babel-cli
基本用法如下。
# 1.轉碼結果輸出到標准輸出
$ babel example.js
# 2.轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 3.整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# 4. -s 參數生成source map文件
$ babel src -d lib -s
上面代碼是在全局環境下，進行Babel轉碼。這意味着，
如果項目要運行，全局環境必須有Babel，
也就是說項目產生了對環境的依賴。
另一方面，這樣做也無法支持不同項目使用不同版本的Babel。
解決上面問題的辦法是將babel-cli安裝在項目之中。
# 安裝
$ npm install --save-dev babel-cli
然后，改寫package.json。
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib" //這里將整個目錄都轉碼到一個文件中
},
}
轉碼、編譯的時候，就執行下面的命令。
$ npm run build
2）babel-node
babel-cli工具自帶一個babel-node命令，提供一個支持ES6的REPL環境。
它支持Node的REPL環境的所有功能，而且可以直接運行ES6代碼，不需要進行轉碼處理。
它不用單獨安裝，而是隨babel-cli一起安裝。然后，執行babel-node就進入REPL環境。
#進入REPL環境
$ babel-node
#1.直接在REPL環境中運行ES6代碼，可以執行
> (x => x * 2)(1)
2
#2.除了在在REPL環境中運行ES6代碼之外，babel-node命令可以直接運行ES6腳本。
將上面的代碼放入腳本文件es6.js，然后直接運行。
$ babel-node es6.js
2
babel-node也可以安裝在項目中。
$ npm install --save-dev babel-cli
然后，改寫package.json。
{
"scripts": {
"script-name": "babel-node script.js"
}
}
上面代碼中，使用babel-node替代node，這樣script.js本身就不用做任何轉碼處理。
3）babel-register
babel-register模塊改寫require命令，為它加上一個鈎子。
此后，每當使用require加載.js、.jsx、.es和.es6后綴名的文件，就會先用Babel進行轉碼。
#安裝
$ npm install --save-dev babel-register
使用時，必須首先加載babel-register。
#使用，首先將babel-register require進來，然后將需要編譯的文件require進來
require("babel-register");
require("./index.js");
然后，就不需要手動對index.js轉碼了，babel-register已經自動對文件進行轉碼
需要注意的是，babel-register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。
另外，由於它是實時轉碼，所以只適合在開發環境使用。
---------------------------------------------------------------------------------
2.Traceur轉碼器
Google公司的Traceur轉碼器，也可以將ES6代碼轉為ES5代碼。
使用方法：
1）直接插入網頁
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">
import './Greeter.js';
</script>
上面代碼中，一共有4個script標簽。第一個是加載Traceur的庫文件，
第二個和第三個是將這個庫文件用於瀏覽器環境，
第四個則是加載用戶腳本，這個腳本里面可以使用ES6代碼，開發人員編寫的ES6代碼最后都寫在這里
注意，第四個script標簽的type屬性的值是module，而不是text/javascript。
這是Traceur編譯器識別ES6代碼的標志，編譯器會自動將所有type=module的代碼編譯為ES5，然后再交給瀏覽器執行。
除了引用外部ES6腳本，也可以直接在網頁中放置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。
2）Traceur的命令行轉換方法：
作為命令行工具使用時，Traceur是一個Node的模塊，首先需要用Npm安裝。
$ npm install -g traceur
安裝成功后，就可以在命令行下使用Traceur了。
Traceur直接運行es6腳本文件，會在標准輸出顯示運行結果，以腳本calc.js為例。
$ traceur calc.js
Calc constructor
9
如果要將ES6腳本轉為ES5保存，要采用下面的寫法。
$ traceur --script calc.es6.js --out calc.es5.js
上面代碼的--script選項表示指定輸入文件，--out選項表示指定輸出文件。
為了防止有些特性編譯不成功，最好加上--experimental選項。
$ traceur --script calc.es6.js --out calc.es5.js --experimental
命令行下轉換生成的文件，就可以直接放到瀏覽器中運行。
3）Traceur的Node.js環境的用法
Traceur的Node.js用法如下（假定已安裝traceur模塊）。
var traceur = require('traceur');
var fs = require('fs');
// 將ES6腳本轉為字符串
var contents = fs.readFileSync('es6-file.js').toString();
var result = traceur.compile(contents, {
filename: 'es6-file.js',
sourceMap: true,
// 其他設置
modules: 'commonjs'
});
if (result.error)
throw result.error;
// result對象的js屬性就是轉換后的ES5代碼
fs.writeFileSync('out.js', result.js);
// sourceMap屬性對應map文件
fs.writeFileSync('out.js.map', result.sourceMap);
---------------------------------------------------------------------------------
3.直接在線編譯————主要用於測試
http://babeljs.io/repl/
http://google.github.io/traceur-compiler/demo/repl.html
---------------------------------------------------------------------------------
4.ES6直接在node 里面使用
Node.js是JavaScript語言的服務器運行環境，對ES6的支持度比瀏覽器更高。
通過Node，可以體驗更多ES6的特性。
使用方法：1）直接使用，需要添加'use script' ————node xxx.js
2)使用node--harmony_desctructuring xxx.js
---------------------------------------------------------------------------------
我們在下面的文章中具體講解ES6時，使用Traceur轉碼器的直接插入網頁的方法來轉碼ES6
traceur：是由Google出的編譯器，可以將ES5編譯成ES6
bootstrap：是一個引導程序(與響應式的bootstrap不同)
需要將traceur.js和bootstrap.js下載下來，引入到當前文件中即可
---------------------------------------------------------------------
注意：在使用ES6時，先不用引入任何東西，去測試，
當不支持ES6時，再去引入traceur.js和bootstrap.js對RS6進行轉碼。
以為現在瀏覽器已經支持部分ES6功能，有的不需要轉碼，轉碼反而錯誤