古語有云：“君子生非異也，善假於物；工欲善其事，必先利其器。”
由於有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發環境，利用工具，把ES6的語法轉變成ES5的語法。
1、使用Babel把ES6編譯成ES5
1.1 建立工程目錄
先建立一個項目的工程目錄，並在目錄下邊建立兩個文件夾：dist 和 src
1.2 初始化項目
在安裝Babel之前，需使用npm init先初始化我們的項目。通過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：
npm init -y
命令執行完成後，會在項目根目錄下生產package.json文件。
1.3 全局安裝Babel-cli
npm install -g babel-cli
1.4 本地安裝轉碼規則
npm install --save-dev babel-preset-es2015 babel-cli
安裝完成後，我們可以看一下我們的package.json文件，已經多了devDependencies選項。
1.5 新建.babelrc
在根目錄下新建.babelrc文件，.babelrc是Babel的配置文件。
該文件是用來設置轉碼規則和插件的，基本格式如下：
{
"presets":["es2015"],
"plugins":[]
}
1.6 babel基本用法
# 轉碼結果輸出到標準輸出
$ babel example.js
# 轉碼結果寫入一個文件 (--out-file 或 -o 參數指定輸出文件)
$ babel example.js --out-file compiled.js
或者
$ babel example.js -o compiled.js
# 整個目錄轉碼 (--out-dir 或 -d 參數指定輸出目錄)
$ babel src --out-dir lib
或者
$ babel src -d lib
# -s 參數生成source map文件
$ babel src -d lib -s
在src目錄下，新建index.js文件，使用ES6中的 let聲明和字符串模板
let name = 'Bread and Dream';
let greeting = `hello ${name}`;
在命令行輸入
babel src/index.js -o dist/index.js
這時dist目錄會生成 index.js 文件，輸出結果爲：
'use strict';
var name = 'Bread and Dream';
var greeting = 'hello ' + name;
項目文件最終結構
1.7 簡化轉化命令：
使用babel命令行，一大長串，很容易忘記，所以，我們可以進行改造，打開package.json文件，添加以下代碼
{
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
}
修改好後，以後我們就可以在命令行輸入 npm run build 進行轉換了。
（注：build是自定義的，爲了語義化命名爲build，當然也可以命名成其他的，例如 compile）
2、webpack + Babel 構建 ES6 開發平臺
2.1 搭建 webpack 基本文件目錄
- 首先全局安裝webpack（這裏使用 [email protected] 版本）
npm install -g webpack@3
- 新建一個文件夾，命名爲 webpack_demo；
- 命令行切換到 webpack_demo的文件目錄下，執行下面的命令， 生成默認 package.json 配置文件
npm init -y
- 利用 npm 安裝 webpack
npm i --save-dev webpack@3
-
新建 webpack.config.js（用於配置 webpack 的運行方式），最簡單的配置如下：
module.exports= {
/* webpack 入口起點 */ entry:'./index.js', /* webpack 輸出 */ output:{ // 輸出 文件名 filename:'./test.js' },}
2.2 安裝babel相關
- 安裝 babel-core 包
npm i --save-dev babel-core - 安裝babel-preset-env 和 babel-preset-stage-0 包
npm i --save-dev babel-preset-env babel-preset-stage-0
babel-preset-env 是一個主流的 Babel 插件數組；Stage-X 是實驗階段的 Presets
2.3 將 webpack 和 Babel 結合在一起
-
需要在兩者之間建立一條紐帶，而通過 webpack 的 loaders 就可以生成這條紐帶，因此要修改 webpack.config.js 配置文件：
/ webpack loaders 配置 /
module:{rules:[ { test:/\.js$/, use:{ loader:'babel-loader', }, } ],},
就是針對以 .js 結尾的文件使用 babel-loader。由於項目中還不存在 babel-loader，所以要先安裝該模塊：
npm i --save-dev babel-loader
- 通過使用 loader 語法配置 Babel 的 presets
使用 webpack 提供的方法，具體在 webpack.config.js 的 module.rules.use.options 中配置
/* webpack loaders 配置 */
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
'babel-preset-env',
'babel-preset-stage-0'
]
}
},
}
],
},
最終的項目結構爲：
在當前目錄下執行 webpack 命令
webpack
輸入文件 index.js 中的ES6代碼已經被轉換成輸出文件 test.js 中的 ES5 代碼了：
3、Traceur轉碼器
Google公司的Traceur轉碼器，也可以將ES6代碼轉爲ES5代碼。
3.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代碼的標識。
3.2 Traceur的命令行轉換方法：
首先需要用npm安裝。
$ npm install -g traceur
直接運行ES6代碼，以index.js爲例
$ traceur index.js
將ES6輸出爲ES5腳本
$ traceur --script index.js --out es5.js
爲了防止有些特性編譯不成功，最好加上–experimental選項。
$ traceur --script index.js --out es5.js --experimental
4、直接在線編譯
Babel提供一個REPL在線編譯器，可以在線將ES6代碼轉爲ES5代碼。
轉換後的代碼，可以直接作爲ES5代碼插入網頁運行。
5、總結
使用babel搭建環境的順序：
- 創建項目創建兩個文件夾src和dist
- 使用npm init 初始化項目生成package.json（項目信息文件）
- 使用 npm install -g babel-cli 全局安裝
- 使用 npm install –save-dev babel-preset-es2015 babel-cli本地安裝
- 創建.babelrc文件（babel轉換的配置文件）
- 在src下創建js，編寫ES6語法
- babel src/index.js -o dist/index.js轉碼生成ES5語法
babel 本質就是一個 JavaScript 編譯器，通過：
- 將 JavaScript 源代碼解析成抽象語法樹（AST）；
- 將源代碼的 AST 結果一系列轉換生成目標代碼的 AST；
- 將目標代碼的 AST 轉換成 JavaScript 代碼。
當然，感興趣的小夥伴可以深入研究下babel及其插件的源碼，瞭解其運行機制，以便更全面的掌握ES6轉ES5的相關原理、機制。