[ ES6 ] 二. 使用 Babel 編譯你的ES6代碼

第一篇文章 [ ES6 ] 一. 準備出擊 裏已經給出了babel的相關信息:git

因爲目前各類環境下對ES6的支持程度並不高,在瀏覽器運行ES6代碼是不太現實的,不過咱們同樣能夠用ES6的新特新寫代碼,只是最後運行以前須要將其編譯爲 ES5的代碼, 因此天然少不了編譯工具,這裏只介紹一個,也是最好用的一個: Babel .es6

  1. githubgithub

  2. 官網npm

  3. 在線編譯系統gulp

  4. gulp-babel瀏覽器

  5. grunt-babelbabel

一. 安裝Babel

根據你所使用的工具來進行不一樣的 babel 安裝: grunt

1.使用命令行的方式工具

首先須要全局安裝 babeles5

$ npm install -g babel

使用:

$ babel script.js

這樣編譯出來的ES5代碼是直接顯示在命令行中的,但代碼量多時較難閱讀:

clipboard.png

編譯以後:
clipboard.png

因此我須要使用一些參數將編譯後的代碼保存:

$ babel -d [es5-dir] [es6-dir]

如:

clipboard.png

 

二: 使用gulp

安裝gulp-babel:

$ npm install --save-dev gulp-babel

可是單有這個是不行的,請確保你有全局安裝或局部安裝babel-core:

$ npm install --save-dev babel-core

而後來新建一個gulp任務:、

clipboard.png

那麼這裏的gulpfile是用ES6寫的,如何使用ES6寫gulpfiel.js 請看:

使用gulp或grunt去實時編譯輸出ES6代碼是很方便的。

更多工具的安裝使用方式請參考官網文檔:https://babeljs.io/docs/setup/

相關文章
相關標籤/搜索