讓nodeJS支持ES6的詞法----babel的安裝和使用方法

要使用Babel， 我們需要nodeJS的環(huán)境和npm， 主要安裝了nodeJS， npm就默認(rèn)安裝了 ， 現(xiàn)在安裝nodeJS很簡單了， 直接下載安裝就好了；

安裝es-checker

在使用Babel之前 ， 我們要先檢測一下當(dāng)前node對es6的支持情況， 我們使用先es-checker， 命令行下執(zhí)行：

運(yùn)行下面代碼

npm -g install es-checker

es-checker安裝完畢以后， 命令行執(zhí)行：es-checker ， 如下圖， 我的node環(huán)境版本是v4.4.3， 支持64%哦 ：

babel的安裝

所以我們來安裝babel吧， 有了babel， 能夠使用更多高級詞法！

首先新建一個(gè)工作目錄， 然后創(chuàng)建一個(gè)package.json的文件， 內(nèi)部內(nèi)容為：

運(yùn)行下面代碼

{
 "name": "my-project",
 "version": "1.0.0",
 "devDependencies": {
 }
}

然后再打開cmd(命令行), 在工作目錄下執(zhí)行命令安裝babel-cli：

運(yùn)行下面代碼

npm --save-dev install babel-cli

再安裝一個(gè)全局的babel-cli：

運(yùn)行下面代碼

npm -g install babel-cli

接著在工作目錄創(chuàng)建一個(gè)名字為.babelrc的文件， 文件內(nèi)容入如下（ 要注意window系統(tǒng)下創(chuàng)建這種文件系統(tǒng)會(huì)提示你：“必須鍵入文件名” ， 你可以找別的方式去創(chuàng)建， 我是在開發(fā)工具的工程目錄中把這個(gè)文件創(chuàng)建出來的）：

運(yùn)行下面代碼

 {
 "presets": [
 "es2015"
 ],
 "plugins": []
 }

安裝babel-preset-es2015

還是工作目錄， 然后再安裝babel-preset-es2015：

運(yùn)行下面代碼

npm install --save-dev babel-preset-es2015

到目前為止babel算是安裝完畢了：

測試es6代碼

創(chuàng)建一個(gè)test.js的文件， 8鍵入內(nèi)容：

運(yùn)行下面代碼

let [a,b,c] = [1,2,3];
console.log(a,b,c);

在當(dāng)前目錄下執(zhí)行：

運(yùn)行下面代碼

babel-node test

結(jié)果應(yīng)該是這樣的：

如果直接用執(zhí)行node test， 我這邊會(huì)報(bào)異常： SyntaxError: Unexpected token

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com