搭建基於babel的ES6開發環境

babel是一個轉碼器，能將ES6代碼轉碼成咱們如今的瀏覽器能執行的ES5代碼。 使用3步來配置好一個基本的編譯環境：

1.安裝babel包

和通常的npm包同樣，babel在使用以前也須要進行安裝，使用全局安裝或者本地安裝安裝均可以。 全局安裝方式以下：

npm install --global babel-cli
複製代碼

2.配置.babelrc文件

安裝完成以後，須要在項目根目錄下建立.babelrc文件來來配置轉碼規則。windows系統沒法直接建立.babelrc文件，須要在根目錄下打開cmd輸入如下命令建立：

type nul>.babelrc
複製代碼

建立以後打開.babelrc文件，寫入以下配置：

{
  "presets":[
    "es2015"
  ]
}
複製代碼

presets參數是指須要轉碼的規則集合，咱們須要將ES6代碼轉爲ES5，因此只須要寫入es2015便可。

3.安裝轉碼規則集

配置好.babelrc中的轉碼規則以後，須要在本地安裝規則集。安裝方式以下：

npm install --save-dev babel-preset-es2015
複製代碼

以上3步安裝完成以後，就可使用babel來嘗試對文件進行轉碼。 在項目根目錄中建立main.js文件，寫入以下代碼：

let a = 1;
let b = 2;
const main=(a,b) => {
	return a+b;
}
複製代碼

在根目錄下打開cmd輸入以下轉碼命令：

babel main.js -o bundle.js
複製代碼

執行以後能夠看到根目錄下建立了一個bundle.js文件，內容以下表示轉碼成功。

"use strict";

var a = 1;
var b = 2;
var main = function main(a, b) {
	return a + b;
};
複製代碼

除了編譯單個文件以外，babel還能將整個目錄的文件統一編譯

babel app --out-dir dist
//或者
babel app -d dist
複製代碼

以上代碼能將app目錄下的文件轉碼到dist目錄中去。 全局安裝方式使用babel，項目對全局環境依賴性強，假如不一樣項目須要使用不一樣版本的babel就辦不到了。官方更加推薦使用本地安裝方式來使用babel，按照下面的的安裝方式來在項目中安裝babel。

npm install --save-dev babel-cli
複製代碼

安裝完成以後，就能夠在package.json文件中配置babel的使用。

"scripts":{
   "build":"babel app -d dist"
}
複製代碼

執行npm run build 就能實現和上面全局方式使用的整個目錄轉碼了。 可是咱們在開發的時候，每次文件發生變化就須要從新執行一遍轉碼命令，實在太繁瑣了。 因此咱們可使用如下命令來監控文件的實時變化，一旦文件內容發生改變就自動進行轉碼(使用-w或者--watch)。

babel app/main.js --watch --out-file dist/main.js
babel app/main.js -w --out-file dist/main.js
複製代碼