ES6初探——編譯環境搭建

　　很差意思我又要來寫操做文檔了，看起來更像wiki的博客（若是你想深刻學習，請閱讀文末列的參考資料）。本文將示例如何把ES6編譯成ES5。

　　首先，你要自行查閱什麼是ES6，和ES五、javascript有什麼關係，爲何要編譯ES6。廢話很少說，just test!

　　方法一：

　　第一步：項目目錄下安裝babel-cli和babel-preset-es2015。

　　這裏有一點要說，若是使用npm鏡像下載失敗，就不要使用鏡像，vi ~/.npmrc去掉裏面的鏡像設置。

　　第二步：配置編譯規則。

　　項目根目錄下新建文件.babelrc（注意，以點開頭的文件是隱藏文件，須要在linux環境經過命令建立），配置以下：

　　第三步：package.json裏面添加下列代碼：

"scripts": {
    "babel": "babel app/js/es6Test.js -o app/js/es.js"
  }

　　運行npm run babel結果以下：

　　發生了什麼呢？上面代碼的意思是，用babel編譯app/js/es6Test.js，編譯結果輸出到app/js/es.js。如今咱們看一下結果是否符合預期：

　　結果符合預期，js目錄下多了一個es.js，而且es.js的內容是編譯後的結果。

　　至此，咱們能夠和ES6愉快的開始玩耍了。

　　可是，開始玩耍前，總以爲哪裏不對，居然還要手動編譯，做爲gulp深度依賴粉，自認爲已經懶無救藥了，因此必須再優化一下編譯流程，來看方法二：

　　第一步：安裝gulp-babel（上面已經安裝了babel-preset-es2015，此處再也不重複安裝）。

　　第二步：gulpfile.js裏面新增babel任務以下：

　　如今我們就能夠經過gulp來編譯了：

　　剩下的就是gulp任務流優化&es6 體驗！

一：參考資料：

一、ECMAScript6入門（做者：阮一峯）http://es6.ruanyifeng.com/#docs/intro

二、babel官網 https://babeljs.io/

三、npm插件之gulp-babel https://www.npmjs.com/package/gulp-babel

二：感謝GF大神的指導。