ES6的開發環境搭建
概念
在搭建es6開發環境之前，先簡單介紹一下es6。
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。
我們為什麼要使用es6？es6有什麼優點？......，我會在後面寫一個es6專題系列，來介紹es6的使用。本次分享的內容是 es6的開發環境搭建。
那麼，你肯定又要問，問什麼要搭建es的開發環境，上面不都說 es6是JavaScript 語言的下一代標準了嘛，我們平時寫的js都不需要搭建環境，直接在瀏覽器裡就能執行。
因為至今各大瀏覽器廠商所開發的 JavaScript 引擎都還沒有完成對 ES2016 中所有特性的完美支援，如果直接使用的話，會報錯的。
所以我們既想使用es6帶來的新語法、新特性，又想讓現在的瀏覽器支援es6語法，於是乎像babel 、 Traceur等編譯器便出現了。它們能將尚未得到支援的 ES2016 特性轉換為 ES5 標準的程式碼，使其得到瀏覽器的支援。
這裡我們就使用Babel把ES6編譯成ES5。
建立工程目錄
先建立一個專案的工程目錄，並在目錄下邊建立兩個資料夾：src和dist
src：書寫ES6程式碼的資料夾，寫的js程式都放在這裡。
dist：利用Babel編譯成的ES5程式碼的資料夾，在HTML頁面需要引入的時這裡的js檔案。
編寫index.html
資料夾建立好後，我們新建一個index.html檔案。
需要注意的是在引入js檔案時，引入的是dist目錄下的檔案。
<script src="dist/index.js" type="text/javascript" charset="utf-8"></script>
複製程式碼編寫index.js
在src目錄下，新建index.js檔案。這個檔案很簡單，我們只作一個a變數和箭頭函式的宣告，並用console.log()列印出來。
我們用了let宣告，這裡let是ES6的一種宣告方式，接下來我們需要把這個ES6的語法檔案自動程式設計成ES5的語法檔案。
初始化專案
在安裝Babel之前，需要用npm init先初始化我們的專案。開啟終端或者通過cmd開啟命令列工具，進入專案目錄，輸入下邊的命令：
npm init -yes
複製程式碼-y代表全部預設同意，就不用一次次按回車了。命令執行完成後，會在專案根目錄下生產package.json檔案。
{
"name": "frame.mx.vue",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "babel src -d dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0"
},
"dependencies": {},
"description": ""
}
複製程式碼可以根據自己的需要進行修改，比如我們修改author的值。
全域性安裝Babel-cli
在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶映象的cnpm來進行安裝。安裝cnpm的方法，大家自己百度吧。
cnpm install -g babel-cli
複製程式碼
babel src/index.js -o dist/index.js
複製程式碼你會發現，在dist目錄下確實生產了index.js檔案，但是檔案並沒有變化，還是使用了ES6的語法。因為我們還需要安裝轉換包才能成功轉換，繼續往下看吧。
本地安裝babel-preset-es2015 和 babel-cli
cnpm install --save-dev babel-preset-es2015 babel-cli
複製程式碼
安裝完成後，我們可以看一下我們的package.json檔案，已經多了devDependencies選項。
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
}
}
複製程式碼
新建.babelrc
在根目錄下新建.babelrc檔案(注意，以點開頭的檔案是隱藏檔案，需要在linux環境通過命令建立)，並開啟錄入下面的程式碼
{
"presets":[
"es2015",
],
"plugins":[]
}
複製程式碼
這個檔案我們建立完成後，現在可以在終端輸入的轉換命令了，這次ES6成功轉化為ES5的語法。
babel src/index.js -o dist/index.js
複製程式碼
簡化轉化命令
在學習vue 的時候，可以使用npm run build 直接利用webpack進行打包，在這裡也希望利用這種方式完成轉換。開啟package.json檔案，把檔案修改成下面的樣子。
修改好後，以後我們就可以使用 npm run build 來進行轉換了。
這樣，一個簡單的基本的編譯環境就OK了。
如何利用Gulp實時編譯Babel
待續...待續...待續...待續...待續...待續...待續...待續...