1. 初始化環(huán)境
打開cmd（windows）或者終端（Mac百揭，Linux）聋迎，進(jìn)入項目文件夾飞涂，執(zhí)行：
// 命令行 輸入：
npm init
會得到如下提示語，并開始生成 package.json 文件：
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. Use
npm install <pkg> --saveafterwards to install a package and save it as a dependency in the package.json file.
翻譯：該命令會指引你逐步創(chuàng)建一個 package.json 文件呀枢。這個創(chuàng)建過程只包含了那些最常用的條目胚股，并會給出盡可能有意義的默認(rèn)值。隨后你可以使用npm install <pkg> --save命令安裝一個 package (包) 并將其保存為 package.json 文件中的 dependencies （生產(chǎn)依賴裙秋，對應(yīng) devDependencies開發(fā)依賴） 條目的一項琅拌。
接下來缨伊，命令行會指引你一步一步設(shè)置 name, version, decription 等等，你可以一路回車下去进宝，因為日后你還可以輕松的通過編輯器在 package.json 文件中對這些條目進(jìn)行更改刻坊。如果你打算這么干，我可以推薦給你一種更便捷的初始化命令：
// 命令行 輸入：
npm init -y
這樣你就等于告訴了cmd或者終端：我同意你所有的默認(rèn)值党晋，趕快幫我生成 package.json 文件吧谭胚。這跟你執(zhí)行npm init后一路回車的效果是一樣的。
2. 安裝 babel-cli 模塊未玻，并對 babel 進(jìn)行環(huán)境設(shè)置
在cmd或者終端執(zhí)行（這里我用cnpm代替了npm灾而，如果沒有cnpm需要先全局安裝和配置cnpm）：
// 命令行 輸入：
cnpm install babel-cli --save-dev
這樣會在項目文件夾下生成一個node_modules文件夾，并在package.json文件里添加一個devDependencies屬性扳剿，該屬性的值是一個對象旁趟，對象里會包含一個babel-cli的屬性和對應(yīng)的類似^6.24.1的屬性值。這說明我們已經(jīng)安裝了babel模塊庇绽。
下面需要對babel進(jìn)行環(huán)境設(shè)置锡搜，該設(shè)置文件名為.babelrc。在項目文件夾下新建一個.babelrc文件敛劝，打開該文件，進(jìn)行如下設(shè)置：
// .babelrc 文件內(nèi)容
{
"presets" : ["es2015"]
}
在命令行內(nèi)安裝 .babelrc 文件內(nèi)設(shè)置的預(yù)置項（例如：這里是es2015）：
// 命令行 輸入：
cnpm install --save-dev babel-preset-es2015
3. 將 es2015 語法編譯為 es5 語法 （單文件）
在項目文件夾下新建一個名為es6.js文件纷宇，編寫內(nèi)容為：
// es6.js 文件內(nèi)容
let num = 10;
在命令行內(nèi)執(zhí)行：
// 命令行 輸入：
babel es6.js
這時夸盟，命令行工具會顯示：
// 命令行 生成：
"use strict";
var num = 10;
但是我們需要babel工具幫我們把編譯過的文件保存下來，這是我們需要在命令行輸入：
// 命令行 輸入：
babel es6.js --out-file es5.js
或者使用簡寫方式：
// 命令行 輸入：
babel es6.js -o es5.js
這時像捶，項目文件夾下就會生成一個名為es5.js的文件上陕，文件內(nèi)容為：
// es5.js 內(nèi)容：
"use strict";
var num = 10;
4. 將 es2015 語法編譯為 es5 語法 （批量）
在項目文件夾下新建一個名為src的文件夾，并在該文件夾下創(chuàng)建index.js文件拓春，同樣用es2015的語法編寫內(nèi)容為：
// src 文件夾下的 index.js 文件內(nèi)容
let num = 10;
在命令行內(nèi)執(zhí)行：
// 命令行 輸入：
babel src --out-dir build
或者使用簡寫方式：
// 命令行 輸入：
babel src -d build
這時释簿，項目文件夾下就會生成一個名為build的文件夾，該文件夾下有一個名為index.js的文件硼莽，文件內(nèi)容為：
// build 文件夾下的 index.js 文件內(nèi)容
"use strict";
var num = 10;
5. 設(shè)置 babel 自動編譯
在開發(fā)過程中庶溶，我們需要實時編譯一個文件，只需在命令行輸入：
// 命令行 輸入：
babel --watch src --out-dir build
或者使用簡寫方式：
// 命令行 輸入：
babel --watch src --d build
這時懂鸵，每當(dāng)我們保存src文件夾下的index.js文件時偏螺，babel工具就會執(zhí)行一次編譯，更新build文件夾下的index.js文件并在命令行顯示一次：
// 命令行 顯示：
src\index.js -> build\index.js
在命令行工具中按下ctrl+c即可終止自動編譯功能匆光。
6. 在 package.json 文件中命名具體的命令
我們可以看到套像，一個babel模塊就有很多種命令，雖然有些命令可以簡寫终息，但每次手動輸入還是比較麻煩夺巩。并且贞让，在團(tuán)隊開發(fā)中，我們通常不需要把build文件夾和node_modules文件夾上傳柳譬，我們的同伴就應(yīng)該能獲取到跟我們本地電腦上一樣的項目文件喳张。怎么實現(xiàn)呢？答案就是在package.json文件中命名具體的命令征绎，讓我們的同伴通過簡單的命令達(dá)到目的蹲姐。具體如下：
// package.json 文件中 scripts 屬性
"scripts": {
"build": "babel src -d lib"
},
這時，只要有src文件夾和package.json文件人柿，我們只需在命令行內(nèi)執(zhí)行：
// 命令行 輸入：
npm run build
就能執(zhí)行將src文件夾中的文件用babel編譯并保存至lib文件夾（自動創(chuàng)建）中柴墩。
