如何使用babel安裝配置教程

簡介

babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)化為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行，這意味著，你可以現(xiàn)在就用ES6編寫程序，而不用擔(dān)心現(xiàn)有環(huán)境是否支持。

安裝及配置

npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘寶鏡像安裝會(huì)更快。

步驟：進(jìn)入項(xiàng)目 ==>cnpm install babel-cli --save-dev

為什么不安裝在全局

如果安裝在全局，那意味著項(xiàng)目要運(yùn)行，全局環(huán)境必須有bable，也就是說項(xiàng)目產(chǎn)生了對(duì)環(huán)境的依賴。另一方面，這樣做也無法支持不同項(xiàng)目使用不同版本的babel。

設(shè)定轉(zhuǎn)碼規(guī)則

根目錄下安裝：cnpm install babel-preset-es2015 --save-dev

安裝完成之后，再創(chuàng)建配置文件 .babelrc這個(gè)文件，得放在項(xiàng)目根目錄下，它的基本格式是：

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

presets字段設(shè)置的就是轉(zhuǎn)碼規(guī)則，plugins是設(shè)置的babel的插件。然后配置文件：

{
 "presets":["es2015"]
}

到這里，關(guān)于babel的基本配置就完成了。

實(shí)例演示：

在項(xiàng)目根目錄下創(chuàng)建demo.js

let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item+1);

因?yàn)槲覀儸F(xiàn)在是將babel安裝到了當(dāng)前目錄下，所以不能直接在終端中babel轉(zhuǎn)換命令，得使用npm來運(yùn)行，所以先在packge.json中編寫

{
 "devDependencies": {
 "babel-cli": "^6.26.0",
 "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
 "build":"babel demo.js"
 }
}

進(jìn)入根目錄，npm run build運(yùn)行，查看結(jié)果

也可以輸出到指定的目錄

{
 "devDependencies": {
 "babel-cli": "^6.26.0",
 "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
 "build":"babel demo.js --out-file bunder.js"
 }
}

進(jìn)入根目錄，npm run build運(yùn)行，查看結(jié)果

這次會(huì)在根目錄下找到被編譯過的bunder.js文件

文件夾截圖

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

ES6中map、set與數(shù)組、對(duì)象的對(duì)比（詳細(xì)教程）

利用Angular如何實(shí)現(xiàn)變化檢測

在vue-star中如何實(shí)現(xiàn)評(píng)星組件開發(fā)

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