一檬某、事件驅(qū)動
在項目中使用 ES6 語法这难，并可以通過 Babel 將 ES6 代碼轉(zhuǎn)換為 ES5 的代碼砸彬，然后真正運行的是 ES5 代碼的文件裂垦。
二顺囊、轉(zhuǎn)碼器與編譯器
C語言在計算機里運行，計算機只能識別二進制數(shù)據(jù)（0和1組成的一系列數(shù)據(jù)）,在運行前需要先使用編譯器將代碼編譯成二進制數(shù)據(jù)蕉拢，這個過程叫做編譯特碳。
JS 在瀏覽器中運行，瀏覽器可以識別 ES5（JS 的某個版本） 語法的 JS晕换，而 ES6 （JS 新出的一個版本午乓，還沒有被所有瀏覽器提供支持）語法使用起來更加精簡，我們在寫代碼的時候通常使用 ES6 語法闸准，之后使用Babel 轉(zhuǎn)碼器將 ES6 代碼轉(zhuǎn)換為 ES5 代碼益愈。由于轉(zhuǎn)碼前后都是 JS 這一語言，只是進行版本上的寫法不同夷家，這個過程就叫做轉(zhuǎn)碼蒸其。
三、使用 Babel
新建空白文件夾babel-demo
目錄結(jié)構(gòu)如下：
-babel-demo+package.json+index.js
安裝依賴包
$ npminstall--save-dev babel-cli babel-preset-env
babel-cliBabel 的命令行工具依賴包库快；在 Babel 上一個版本摸袁，命令行工具還是使用babel這個包，不過在新版本中將babel這個包一分為二變成了babel-cli包和babel-core包义屏。
babel-preset-envBabel 的預(yù)設(shè)包靠汁。
什么是預(yù)設(shè)包蜂大？可以理解為 ES6 中有的而 ES5 中沒有的語法，Babel 如何將 ES6 語法變成 ES5 語法蝶怔，依賴的就是這個預(yù)設(shè)包县爬，預(yù)設(shè)包中有很多方法，每條方法對應(yīng)著 ES6 中一個新的語法添谊，該方法的作用就是將 ES6 語法轉(zhuǎn)換為 ES5 語法的轉(zhuǎn)換機制财喳。如第一個方法Arrow functions作用是將 ES6 的箭頭函數(shù)轉(zhuǎn)換為 ES5 中普通的 function 函數(shù)。
配置文件
在babel-demo目錄下創(chuàng)建 Babel 的配置文件.babelrc文件斩狱，在 Windows 中直接創(chuàng)建會報錯：“不能創(chuàng)建沒有文件名的文件”耳高，可以輸入.babelrc.（后面多個點）試試，創(chuàng)建成功之后是沒有后面那個點的所踊。
打開 .babelrc 文件（以記事本打開文件等）泌枪，輸入內(nèi)容如下：
{"presets": ["env"]}
說明： 前面已經(jīng)介紹了預(yù)設(shè)包的概念，因為這里依賴了babel-preset-env包秕岛，前綴babel-preset可以省略不寫碌燕，在配置文件中直接寫env，這條配置的目的是將 Babel 與babel-preset-env聯(lián)系起來继薛，在 Babel 進行轉(zhuǎn)碼的時候修壕，知道從babel-preset-env包中找對應(yīng)的轉(zhuǎn)換機制。
打開index.js文件遏考，輸入以下內(nèi)容：
[1, 2, 3].map(x => x *2);
說明：這里的=>就是 ES6 中函數(shù)的新功能箭頭函數(shù)慈鸠。
使用 Babel 將 ES6 語法轉(zhuǎn)換為 ES5 語法
打開 package.json 文件，修改 script 屬性如下：
"scripts": {"build":"babel index.js --out-file index.es5.js"},
這里--out-file是生成文件灌具，將--out-file換成-d再試試會生成什么青团。
打開 DOS 黑窗口，切換到bel-demo目錄下咖楣，敲入命令進行轉(zhuǎn)換：
$ npm run build> babel-demo@1.0.0 build D:\code\node\babel-demo> babel index.js --out-file index.es5.js
可以看到督笆，敲入npm run build，實際上在命令行中運行的是babel index.js --out-file index.es5.js诱贿，也就是在 package.json 中配置的內(nèi)容娃肿，這樣寫的用處是每次轉(zhuǎn)換可以少敲幾個字母。
打開bel-demo目錄瘪松，會發(fā)現(xiàn)新生成了一個index.es5.js文件咸作，內(nèi)容如下∠溃可以看到箭頭函數(shù)被轉(zhuǎn)換為 ES5 中最常見的 function 函數(shù)了。
"use strict";[1,2,3].map(function(x){returnx *2;});
四墅诡、比較容易混淆的包
1.babel-polyfill介紹
安裝依賴包
$ npminstall--save-dev babel-polyfill
具體是誰壳嚎，我也不知道桐智，暫且稱為某人吧。某人把 ES6 拆分為語法和 API 兩個概念烟馅，可能聽起來有點一樣说庭。前面介紹的babel-preset-env包里記錄就是 ES6 的語法，如箭頭函數(shù)郑趁、for..of刊驴、module 等。而 API 又指什么呢寡润？
babel-polyfill里記錄的就是 ES6 的 API捆憎，具體表現(xiàn)如下：
由上圖可以看到，API 就是指 JS 語言數(shù)據(jù)結(jié)構(gòu)（如：Object梭纹、Array）所擁有的一些新的屬性或方法躲惰，是屬于語言層面的。
比如：Array.from()用于將其它類型的值轉(zhuǎn)換為數(shù)組变抽，這在 ES5 中不存在的方法础拨，是 ES6 新增的方法。Set 和 Map 是 ES6 新增的數(shù)據(jù)結(jié)構(gòu)绍载，這些東東都是屬于語言層面的诡宗。
使用方法：在入口文件的頂端引入
// index.jsimport'babel-polyfill'// 或者require('babel-polyfill');
2.babel-preset-react介紹
安裝依賴包
$ npminstall--save-dev babel-preset-react
ES5 中沒有 react 和 JSX 寫法而 ES6 中有，這個預(yù)設(shè)包就是 ES6 與 ES5 轉(zhuǎn)換 react 和 JSX 語法的機制包击儡。
用法：在.babelrc中進行配置
{"presets": ["env","react"]}
3.babel-runtime與babel-plugin-transform-runtime介紹
安裝依賴包
$ npminstall--save-dev babel-plugin-transform-runtime
$ npminstall--save babel-runtime
babel-plugin-transform-runtime插件包僚焦，需要在.babelrc中配置，作用是在轉(zhuǎn)碼時調(diào)用babel-runtime包中的公共方法曙痘；
babel-runtime工具包芳悲，包內(nèi)寫了很多 ES6 轉(zhuǎn)換為 ES5 可能會用到的公共方法，本身不需要做任何配置边坤，babel-plugin-transform-runtime插件包在運行時會自動尋找該工具包品洛。
配置文件.babelrc
用處
現(xiàn)在，Babel 會把這樣的代碼：
編譯成：
如果不這么寫纽甘，每個文件中都會有classCallCheck和createClass的具體實現(xiàn)代碼锐想，這樣無疑會增加冗余代碼量。 引入babel-runtime工具包旺订，將classCallCheck和createClass公共方法的代碼都寫在這個包里弄企，這樣在用的時候直接引用即可。
