babel 中文官網,中文學習手冊.
babel的作用：官網的解釋是，Babel 是一個 JavaScript 編譯器。簡單的說，目前作用就是把es6轉成瀏覽器支持的es5.
- 先創建個文件夾，隨便去個名字
webpack吧
在webpack文件夾里右鍵Git Bash Here
$ npm init
- 要使用它就先安裝：
$ cnpm install babel-cli -g //全局安裝
$ cnpm install babel-cli --save-dev //本地安裝并添加到開發環境
- 下載安裝
babel,es6轉es5插件
$ cnpm install babel-preset-es2015 --save-dev
- 配置
.babelrc文件，這個文件是要放在webpack文件夾中
因為我們是要把es6轉為es5所以里面的值是es2015
{
"presets": ["es2015"]
}
- 配置完了，接下來就是操作了。在
webpack文件夾里創建es6.js
輸入內容
//es6.js
let a=10;
- 測試，執行
$ babel es6.js
```
"use strict";
var a = 10;
```
就是說明我們配置成功了。
- 接下來我們可以以文件形式輸出
執行
$ babel es6.js --out-file es5.js
`--out-file`可以簡寫為` -o`
這時候會發現webpack文件夾多出了es5.js;內容也是
```
"use strict";
var a = 10;
```
- 如果一個個的轉太麻煩了可以設置批量轉換，一個文件夾的轉換
創建兩個文件夾srcbundle,把es6.js放到src文件夾中.執行命令
$ babel src --out-dir bundle
--out-dir可以簡寫為-d
此時可以發現bundle文件夾里有編譯后的es6.js了
- 每次輸出命令太麻煩了，我們可以加
--watch，
$ babel src --out-dir bundle --watch
這樣每次改變src文件夾里的內容，保存后，bundle的內容將自動轉換。
- 如果覺得輸出這么長的命令不方便還可以簡化
打開package.json,設置
"scripts": {
"bundle": "babel src --out-dir bundle --watch"
},
這樣只需運行
$ npm run bundle 就可以了
