【擁抱ES6】搭建一個ES6環境

現在，新的ECASCript規範已經出來一段時間了，所以有必要學習一下。

首先上一個阮老師的教程：ECMAScript 6 入門

ES6（es2015）是新的規範，因爲如今瀏覽器支持的狀況並不樂觀，有的部分支持或乾脆不支持，所以，咱們頗有必要來一箇中間層工具，轉譯ES6成ES5，讓咱們使用上ES6的不少新的特性，同時寫出來的代碼轉譯成瀏覽器幾乎都支持的ES5，這樣一舉雙得，豈不快哉。

這個工具是什麼呢？之前見過但並無深刻了解過，Babel。

這裏還有一個在線的轉譯工具。try it out!  https://babeljs.io/repl/

而後咱們安裝一下babel的命令行環境

1，首先安裝babel-cli（用於在終端使用babel）

npm install babel-cli -g

2，進入某個項目根目錄，安裝babel-cli和babel-preset-es2015

npm install babel-cli babel-preset-es2015 --save-dev

注：Babel5版本默認包含各類轉換插件，然而Babel6.x相關轉換插件須要本身下載，如transform-es2015-arrow-functions、transform-es2015-classes等，而ES2015 preset包含了全部插件。若是不安裝任何插件，那麼在命令行進行轉換是沒有任何效果的！

其中--save參數自動更新package.json文件，寫進依賴項

3，配置編譯規則

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

4，項目目錄結構

而後咱們用命令行進入這個目錄後，執行

babel es6.js -w -o es5.js

稍等片刻就會發現，es6.js編譯並輸出了es5.js，

 

而且每次保存後，都會自動編譯，並顯示changed [文件]

這樣，一個簡單的基本的編譯環境就OK了。

固然，網上還有不少的方法，好比在package.json裏面加入執行命令。或者是配合gulp來使用。等等。

我在這裏就不詳細說明了。