很久很就以前就使用過webpack，覺得是一個(gè)很神奇的構(gòu)建工具，當(dāng)時(shí)是跟著坑爹的文檔配置，很多的東西都不知其所以然，babel就是其中的一個(gè)，在不知其所以然的情況下，很多的東西都記不住，最近耐心的看了下相關(guān)文檔，終于領(lǐng)悟到了那么一點(diǎn)點(diǎn)，為了方便以后配置和使用遂作記錄。

• 全局配置babel-cli

npm install babel-cli -g //全局安裝babel  這樣的話，就可以在命令行中直接調(diào)用babel命令

為什么就可以用babel命令了呢？是因?yàn)樵趎pm目錄C:\Users\Administrator\AppData\Roaming\npm里面會(huì)生成一個(gè)babel.cmd文件，打開你會(huì)發(fā)現(xiàn)還有node.cmd文件。若是打開沒有發(fā)現(xiàn)的話，是因?yàn)镻C沒有設(shè)置顯示隱藏文件（做開發(fā)最好是顯示隱藏文件名還有隱藏后綴）。

• 在項(xiàng)目的文件夾中安裝babel需要的轉(zhuǎn)碼規(guī)則集

$ npm install --save-dev babel-preset-latest    //最新的轉(zhuǎn)碼規(guī)則

#不同階段的轉(zhuǎn)碼規(guī)則（根據(jù)需要安裝）
$ 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ān)于不同階段的轉(zhuǎn)碼規(guī)則理解這個(gè)是要了解一段歷史，簡(jiǎn)單來說就是ES6是2015年6月發(fā)布的，TC39協(xié)會(huì)決定每年的6月份升級(jí)下js語法規(guī)則，全球的每個(gè)人都可以向TC39提出議案，議案要經(jīng)歷4個(gè)階段，TC39成員需要開會(huì)決定議案是否可行，基本上到了stage-2，這個(gè)議案幾乎就毫無懸念的成為下一個(gè)版本。很多的人叫ES6叫做ES2015，這個(gè)沒毛病，后面又聽到什么ES2017，ES2018...也沒有毛??；但是還有叫ES7，ES8，那就有點(diǎn)瘋狂了，如果每年都升級(jí)一個(gè)版本的話，js這個(gè)語言更新的頻率也就太快了，本人更愿意接受后面的版本叫做ES6.x的觀點(diǎn)。

• 在項(xiàng)目的文件夾中配置.babelrc文件(.babelrc文件是一個(gè)json文件)

  {
      "presets":[ 
                      "latest",
                      "stage-2"
                   ],            //這里面配置選碼規(guī)則
      "plugins":[]             //這里面配置一些插件，例如壓縮代碼等
  }

• 命令行轉(zhuǎn)碼babel-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

上面代碼是在全局環(huán)境下，進(jìn)行 Babel 轉(zhuǎn)碼。這意味著，如果項(xiàng)目要運(yùn)行，全局環(huán)境必須有 Babel，也就是說項(xiàng)目產(chǎn)生了對(duì)環(huán)境的依賴。另一方面，這樣做也無法支持不同項(xiàng)目使用不同版本的 Babel。解決辦法是將babel-cli安裝在項(xiàng)目之中。

# 安裝
$ npm install --save-dev babel-cli

• 改寫 package.json文件

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"    //src 和 lib表示需要轉(zhuǎn)碼的目錄文件夾以及指定生成的文件夾
  },
}

轉(zhuǎn)碼的時(shí)候，就執(zhí)行下面的命令。

$ npm run build

完畢！~