babel 中文官網(wǎng),中文學(xué)習(xí)手冊(cè).
babel的作用：官網(wǎng)的解釋是，Babel 是一個(gè) JavaScript 編譯器砸逊。簡(jiǎn)單的說(shuō)璧南，目前作用就是把es6轉(zhuǎn)成瀏覽器支持的es5.
- 先創(chuàng)建個(gè)文件夾，隨便去個(gè)名字
webpack吧
在webpack文件夾里右鍵Git Bash Here
$ npm init
- 要使用它就先安裝：
$ cnpm install babel-cli -g //全局安裝
$ cnpm install babel-cli --save-dev //本地安裝并添加到開發(fā)環(huán)境
- 下載安裝
babel,es6轉(zhuǎn)es5插件
$ cnpm install babel-preset-es2015 --save-dev
- 配置
.babelrc文件师逸，這個(gè)文件是要放在webpack文件夾中
因?yàn)槲覀兪且?code>es6轉(zhuǎn)為es5所以里面的值是es2015
{
"presets": ["es2015"]
}
- 配置完了司倚，接下來(lái)就是操作了。在
webpack文件夾里創(chuàng)建es6.js
輸入內(nèi)容
//es6.js
let a=10;
- 測(cè)試，執(zhí)行
$ babel es6.js
```
"use strict";
var a = 10;
```
就是說(shuō)明我們配置成功了动知。
- 接下來(lái)我們可以以文件形式輸出
執(zhí)行
$ babel es6.js --out-file es5.js
`--out-file`可以簡(jiǎn)寫為` -o`
這時(shí)候會(huì)發(fā)現(xiàn)webpack文件夾多出了es5.js;內(nèi)容也是
```
"use strict";
var a = 10;
```
- 如果一個(gè)個(gè)的轉(zhuǎn)太麻煩了可以設(shè)置批量轉(zhuǎn)換皿伺，一個(gè)文件夾的轉(zhuǎn)換
創(chuàng)建兩個(gè)文件夾srcbundle,把es6.js放到src文件夾中.執(zhí)行命令
$ babel src --out-dir bundle
--out-dir可以簡(jiǎn)寫為-d
此時(shí)可以發(fā)現(xiàn)bundle文件夾里有編譯后的es6.js了
- 每次輸出命令太麻煩了，我們可以加
--watch盒粮，
$ babel src --out-dir bundle --watch
這樣每次改變src文件夾里的內(nèi)容鸵鸥，保存后，bundle的內(nèi)容將自動(dòng)轉(zhuǎn)換丹皱。
- 如果覺得輸出這么長(zhǎng)的命令不方便還可以簡(jiǎn)化
打開package.json,設(shè)置
"scripts": {
"bundle": "babel src --out-dir bundle --watch"
},
這樣只需運(yùn)行
$ npm run bundle 就可以了
