Babel 6 與之前版本的區(qū)別
之前版本只需安裝一個(gè) babel蟹漓，但在 babel 6 中，將 babel 拆分成兩個(gè)包：babel-cli 和 babel-core家肯。如果想要在CLI（終端或REPL）使用 babel 就下載 babel-cli菱属，如果在 node 中 使用就下載 babel-core肛宋。
Babel轉(zhuǎn)碼
1. 直接安裝 babel 法：
1.1)首先全局安裝 babel
npm install -g @babel/cli
<!--
也可以通過直接將 babel 安裝到項(xiàng)目中，在項(xiàng)目根目錄下執(zhí)行下面命令榨馁，同時(shí)它會(huì)在 package.json 文件中的 devDependencies 中加入 babecli
在執(zhí)行安裝之前憨栽，要先在項(xiàng)目根目錄下新建一個(gè) package.json 文件
-->
npm install --save-dev @babel/cli
<!-- 【注意項(xiàng)目目錄中不能含有中文名】 -->
<!-- 【如果安裝時(shí)，出現(xiàn) npm ERR Path C:\Users\Administrator\AppData\Roaming\npm\node_modules\babel-cli..... 路徑之類的錯(cuò)誤翼虫，就把babel-cli文件夾刪除了屑柔，然后重新安裝】 -->
1.2) babel 的配置文件是 .babelrc，存放在項(xiàng)目的根目錄珍剑。使用 babel 的第一步掸宛，就是配置這個(gè)文件。
{
"presets": [],
"plugins": []
}
1.3) presets 字段設(shè)定轉(zhuǎn)碼規(guī)則招拙，官方提供以下的會(huì)澤集旁涤，可以根據(jù)需要安裝。
點(diǎn)擊此處到 babel 中文官網(wǎng) presets 配置頁(yè)面：Babel Plugins
# 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
1.4) 根據(jù)官網(wǎng)的提示劈愚，當(dāng)我們用 npm 安裝好這些插件工具之后，我們需要將這些規(guī)則加入到 .babelrc 中去：
{
"presets": [
"es2015",
"react",
"stage-2"
<!-- 根據(jù)你安裝的插件闻妓，寫入對(duì)應(yīng)的規(guī)則 -->
],
"plugins": []
}
1.5) 轉(zhuǎn)碼菌羽、轉(zhuǎn)碼規(guī)則：
# 轉(zhuǎn)碼結(jié)果輸出到終端
babel name.js
# 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
babel es6.js --out-file es5.js
# 或者
babel es6.js -o es5.js
<!-- --out-file 或 -o 參數(shù)指定輸出文件 -->
# 要在 每次文件修改后 編譯該文件，請(qǐng)使用 --watch 或 -w 參數(shù)：
babel es6.js --watch --out-file es5.js
# 整個(gè)目錄轉(zhuǎn)碼
babel src --out-dir lib
# 或者
babel src -d lib
<!-- --out-dir 或 -d 參數(shù)指定輸出目錄 -->
# -s 參數(shù)生成 source map 文件
babel src -d lib -s
2. 工具配置法：
實(shí)際上由缆，我們可以通過很多工具實(shí)現(xiàn) ES6 的轉(zhuǎn)碼配置注祖，比如猾蒂，常見的 grunt、gulp是晨、webpack 和 node 等肚菠。下面我就簡(jiǎn)單的說下我較為熟悉的 gulp 配置法。
點(diǎn)擊此處到 Babel 中文官網(wǎng) Tool 配置頁(yè)面：Babel Tool
2.1) 首先罩缴，我們需要在項(xiàng)目中安裝 gulp：
npm install gulp --save-dev
2.2) 然后蚊逢，我們需要在項(xiàng)目中安裝 gulp-babel：
npm install --save-dev gulp-babel
2.3) 編寫 gulpfile.js 文件，文件內(nèi)容如下：
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function (){
return gulp.src("src/name.js").pipe(babel()).pipe(gulp.dest("lib"));
});
當(dāng)我們?cè)诋?dāng)前目錄下運(yùn)行如下命令箫章，會(huì)發(fā)現(xiàn)原來在 src 文件夾中的 name.js（按照 ES6 標(biāo)準(zhǔn)編寫的）文件已經(jīng)被轉(zhuǎn)碼成 ES5 標(biāo)準(zhǔn)的 name.js烙荷，并放在了 lib 文件夾里邊。
gulp default
# 或者
gulp
在線轉(zhuǎn)碼
Babel 提供一個(gè) REPL 在線編輯器檬寂，可以在線將 ES6 代碼轉(zhuǎn)為 ES5 代碼终抽。轉(zhuǎn)換后的代碼，可以直接作為 ES5 代碼插入網(wǎng)頁(yè)運(yùn)行桶至。
