如今,新的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來使用。等等。
我在這里就不詳細說明了。