當咱們還在沉迷於ES5的時候,卻不知ES6早就已經發布幾年了。時代在進步,WEB前端技術也在突飛猛進,是時候作些改變了!前端
ECMAScript 6(ES6)的發展速度很是之快,但現代瀏覽器對ES6新特性支持度不高,因此要想在瀏覽器中直接使用ES6的新特性就得藉助別的工具來實現。
Babel是一個普遍使用的轉碼器,babel能夠將ES6代碼完美地轉換爲ES5代碼,因此咱們不用等到瀏覽器的支持就能夠在項目中使用ES6的特性。 node
babel 6與以前版本的區別:
以前版本只要安裝一個babel就能夠用了,因此以前的版本包含了一大堆的東西,這也致使了下載一堆沒必要要的東西。但在babel 6中,將babel拆分紅兩個包:babel-cli和babel-core。若是你想要在CLI(終端或REPL)使用babel就下載babel-cli,若是想要在node中使用就下載babel-core。 babel 6已結儘量的模塊化了,若是還用babel 6以前的方法轉換ES6,它會原樣輸出,並不會轉化,由於須要安裝插件。若是你想使用箭頭函數,那就得安裝箭頭函數插件npm install babel-plugin-transform-es2015-arrow-functions。
本文中,咱們不討論ES6的語法特性,重點講的是如何將ES6代碼轉碼爲ES5代碼。 react
若是你並無接觸過ES6,當你看到下面的代碼時,確定是有點懵逼的(這是什麼鬼?心中一萬頭神獸奔騰而過),可是你沒看錯,這就是ES6。無論你看不看它,它都在這裏。npm
var a = (msg) => () => msg; var bobo = { _name: "BoBo", _friends: [], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); } };
實際上,上面的這段代碼經過Babel轉換後,會變成:json
"use strict"; var a = function a(msg) { return function () { return msg; }; }; var bobo = { _name: "BoBo", _friends: [], printFriends: function printFriends() { var _this = this; this._friends.forEach(function (f) { return console.log(_this._name + " knows " + f); }); } };
好,言歸正傳,咱們嘗試下用一些方法來實現上面的轉碼效果吧。gulp
1.1) 首先全局安裝Babel。瀏覽器
$ npm install -g babel-cli //也能夠經過直接將Babel安裝到項目中,在項目根目錄下執行下面命令,同時它會自動在package.json文件中的devDependencies中加入babel-cli //在執行安裝到項目中命令以前,要先在項目根目錄下新建一個package.json文件。 $ npm install -g babel-cli --save-dev
若是將babel直接安裝到項目中,它會自動在package.json文件中的devDependencies中加入babel-cli。以下所示:babel
//...... { "devDependencies": { "babel-cli": "^6.22.2" } }
1.2) Babel的配置文件是.babelrc,存放在項目的根目錄下。使用Babel的第一步,就是配置這個文件。模塊化
這個文件的完整文件名是 「.babelrc」,注意最前面是有個「.」的。因爲個人電腦是Windows系統,因此在新建這個文件的時候總是提示 「必須鍵入文件名」 的錯誤。後來谷歌了下,發現建立這個文件的時候,把文件名改爲「.babelrc.」,注意是先後都有一個點,這樣就能夠保存成功了函數
{ "presets": [], "plugins": [] }
1.3) presets字段設定轉碼規則,官方提供如下的規則集,你能夠根據須要安裝。
點擊此處到Babel中文官網presets配置頁面:Babel Plugins
# ES2015轉碼規則 $ npm install --save-dev babel-preset-es2015 # react轉碼規則 $ npm install --save-dev babel-preset-react # ES7不一樣階段語法提案的轉碼規則(共有4個階段),選裝一個 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3
1.4) 根據官網的提示,當咱們用npm安裝好這些插件工具以後,咱們須要將這些規則加入到.babelrc中去。以下所示:
{ "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }
1.5) 轉碼、轉碼的規則:
# 轉碼結果輸出到標準輸出 $ babel test.js # 轉碼結果寫入一個文件 # --out-file 或 -o 參數指定輸出文件 $ babel a.js --out-file b.js # 或者 $ babel a.js -o b.js # 整個目錄轉碼 # --out-dir 或 -d 參數指定輸出目錄 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 參數生成source map文件 $ babel src -d lib -s
實際上,咱們能夠經過前端自動化的不少工具來實現ES6的轉碼配置,好比,常見的grunt、gulp、Webpack和Node等。下面我就簡單的說下我較爲熟悉的gulp配置法。
點擊此處到Babel中文官網Tool配置頁面:Babel Tool
2.1) 首先,咱們須要在項目中安裝gulp:
$ npm install gulp --save-dev
2.2) 而後,咱們須要在項目中安裝gulp-babel:
$ npm install --save-dev gulp-babel
當執行完上面的兩個命令後,咱們會發現根目錄下的package.json文件內容已經被自動修改爲:
{ "devDependencies": { "babel-cli": "^6.22.2", "gulp": "^3.9.1", "gulp-babel": "^6.1.2" } }
2.3) 編寫gulpfile.js文件,文件內容以下所示:
var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () { return gulp.src("src/a.js") .pipe(babel()) .pipe(gulp.dest("lib")); });
當咱們在當前項目目錄下運行以下命令後,會發現本來在src文件夾中的a.js(按照ES6標準編寫的)文件已經被轉碼成ES5標準的a.js,並放在了lib文件夾裏面。
$ gulp default #或者用下面的命令也行 $ gulp
以上兩種方法,在我本地親測有效。固然,你能夠選擇更多其餘的工具來處理,異曲同工,Anyway,讓咱們一塊兒來擁抱ES6吧!
固然,你也能夠選擇在線轉碼(測試體驗用),地址是:http://babeljs.cn/repl/。