【擁抱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來使用。等等。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM