近期活玲，項(xiàng)目經(jīng)理的一些需求拧额，打包APP放在電視上碘裕，電視的安卓版本不支持大量es6的寫法凑耻，我也很無奈…………
考慮買個(gè)杯墊太示，明確一下需求啦
“程序員必備神器之板磚杯墊”有了這個(gè)杯墊，需求變得越來越清晰明了香浩，PM的話也少了很多类缤。
好啦，先說下這個(gè)babel是什么吧Ａ诳浴Ｑ椒恰！
babel.js
簡而言之镜盯，babel就可以讓我們當(dāng)前的項(xiàng)目中隨意的使用這些最新的ES6和ES7的語法岸裙，說白啦，就是把各種JavaScript千奇百怪的寫法速缆，統(tǒng)統(tǒng)轉(zhuǎn)為瀏覽器可以好認(rèn)的寫法降允。
1.
首先，要安裝下node艺糜，新建一個(gè)文件夾剧董，作為babel的文件，然后 npm init （相關(guān)信息直接一路回車破停，設(shè)置默認(rèn)）翅楼，最后生成package.json文件
2.
編寫.babelrc文件，這個(gè)是必須的真慢，第一次沒有配置毅臊，沒有一點(diǎn)用，基本格式如下
{
"presets": [], //設(shè)置轉(zhuǎn)碼規(guī)則
"plugins": [] //設(shè)置插件
}
window下不允許直接右鍵創(chuàng)建沒有文件名的文件黑界，所以創(chuàng)建的使用命令行去創(chuàng)建管嬉，在當(dāng)前目錄下，使用命令行
type nul>.babelrc
就ok啦朗鸠。
官方還提供了別的規(guī)則蚯撩，使用直接安裝，進(jìn)行配置
# ES2015轉(zhuǎn)碼規(guī)則
npm install --save-dev babel-preset-es2015
# react轉(zhuǎn)碼規(guī)則
npm install --save-dev babel-preset-react
# ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有4個(gè)階段）烛占，選裝一個(gè)
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
然后呢胎挎，把安裝好的規(guī)則寫入.babelrc
{
"presets": [
"es2015"
],
"plugins": []
}
3
安裝babel-cil工具，利用命令行轉(zhuǎn)碼，命令如下
# 全局安裝
npm install --global babel-cli
# 在項(xiàng)目文件中安裝
npm install --save-dev babel-cli
在全局安裝babel-cli犹菇，意味著德迹，如果項(xiàng)目要運(yùn)行，全局環(huán)境必須要有babel项栏，也就是說項(xiàng)目產(chǎn)生了對(duì)環(huán)境的依賴浦辨，并且這樣做也無法支持不同項(xiàng)目使用不同版本的babel蹬竖，所以官網(wǎng)強(qiáng)烈要求我們使用后一種安裝方式沼沈，在項(xiàng)目中安裝。
在項(xiàng)目中安裝之后币厕，需要改寫一下package.json:
{
//...略去了其他的內(nèi)容
"devDependencies": {
"babel-cli": "^6.0.0" //這里的版本號(hào)為安裝的時(shí)候的版本號(hào)列另，一般安裝的時(shí)候就會(huì)自動(dòng)寫入
},
"scripts": {
"build": "babel src -d lib"
//編譯整個(gè) src 目錄并將其輸出到 lib 目錄。這里的src指的是需要轉(zhuǎn)換的目錄旦装，lib指的是輸出的內(nèi)容的存放目錄
},
}
注意 如果創(chuàng)建的目錄文件名稱不為src和lib页衙，一定要替換，不然后續(xù)會(huì)報(bào)錯(cuò)阴绢。
轉(zhuǎn)碼的時(shí)候就執(zhí)行
npm run build
我們還可以直接通過babel-cli直接去轉(zhuǎn)碼,直接轉(zhuǎn)碼的話店乐，編寫babelrc文件，再安裝規(guī)則和cli就直接可以使用啦
# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
babel example.js
# 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
# --out-file 或 -o 參數(shù)指定輸出文件
babel example.js --out-file compiled.js
# 或者
babel example.js -o compiled.js
# 整個(gè)目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
babel src --out-dir lib
# 或者
babel src -d lib
# -s 參數(shù)生成source map文件
babel src -d lib -s
