新系列導(dǎo)讀
學(xué)習(xí)編程語言是一件持之以恒的事情遮糖，從學(xué)會簡單的語法就能寫出程序礁凡，到理解類型和設(shè)計模式妒牙，再到考慮代碼的組織架構(gòu)吐绵。誰不是從這樣一點點深入和積累的呢迹淌？入門總是輕松又令人愉悅的，但隨著知識點越來越多學(xué)習(xí)的曲線卻驟然陡峭己单。但隨著對語言的深入理解唉窃，再回頭來重新審閱基本的知識，又會有柳暗花明又一村的豁然感纹笼，「啊纹份，原來是這樣的」那種感覺。
這個「3分鐘」系列將利用 babel 在線的實時編譯工具廷痘，來學(xué)習(xí)分析 es6+ 的部分特性蔓涧。通過編譯后的 es5 代碼，我們可以從中了解到 es6+ 特性的實現(xiàn)細(xì)節(jié)笋额，更好的掌握新特性的適用性元暴。
作為系列的第一篇，先介紹這個 babel 在線實時編譯工具兄猩。
babel
「今天茉盏，使用下一代 Javascript 編程」，正如 babel 官網(wǎng)的標(biāo)語枢冤，babel 正是為抹平 高速擴(kuò)展的 JS 標(biāo)準(zhǔn) 和 緩慢實現(xiàn)標(biāo)準(zhǔn)的瀏覽器 產(chǎn)生的鴻溝而出現(xiàn)的援岩。babel 最大的功能就是將瀏覽器還未支持的語法編譯成低版本 js 語法，讓其能正常運行掏导。
首先打開頁面 babel 在線實時編譯
界面分為三大區(qū)域：設(shè)置區(qū)享怀、源碼區(qū) 和 編譯區(qū)。
設(shè)置區(qū)
主要進(jìn)行編譯方式的設(shè)置和編譯環(huán)境的設(shè)置趟咆。
我們主要關(guān)心編譯環(huán)境（PRESETS) 的設(shè)置添瓷，比如你希望引入的環(huán)境編譯包(lib)梅屉。圖中所示的就是引入了 es2015 和 stage-3 兩個編譯包，編譯器就會先對源碼進(jìn)行 stage-3 的特性進(jìn)行編譯，再對 es2015 的特性進(jìn)行編譯其馏。需要注意的是瘾晃，如果只開啟 es2015 那么只會編譯 es2015 中新增的特性，更加新穎的特性就無法識別出來惰聂。
讓我們來舉個例子：箭頭函數(shù)是 es2015 的新特性，而算數(shù)運算符冪運算 ** 是 es2016 的新特性咱筛，那么在編譯環(huán)境里只選擇 es2015 會發(fā)生什么呢搓幌？
// v6.26.0
// presets: es2015
// 源碼區(qū)
let foo = {
bar: () => {
return true;
},
baz: 10 ** 2,
}
// 編譯區(qū)
"use strict";
var foo = {
bar: function bar() { // 只有 es2015 的箭頭函數(shù)被編譯了
return true;
},
baz: 10 ** 2
};
如果在編譯環(huán)境里只選擇 es2016 會發(fā)生什么呢？
// v6.26.0
// presets: es2016
// 源碼區(qū)
let foo = {
bar: () => {
return true;
},
baz: 10 ** 2,
}
// 編譯區(qū)
let foo = {
bar: () => {
return true;
},
baz: Math.pow(10, 2) // 只有 es2016 的冪運算符被編譯了
};
所以如果想讓所有新特性都被編譯成 es5 那么最好同時選擇 es2015 和 stage-3 兩個編譯包迅箩。
// v6.26.0
// presets: es2015 stage-3
// 源碼區(qū)
let foo = {
bar: () => {
return true;
},
baz: 10 ** 2,
}
// 編譯區(qū)
"use strict";
var foo = {
bar: function bar() {
return true;
},
baz: Math.pow(10, 2)
};
// 特性都被編譯了
源碼區(qū)和編譯區(qū)
在源碼區(qū)輸入代碼溉愁，在編譯區(qū)就能實時顯示編譯后的代碼。
示例解讀
在這個系列里的代碼示例饲趋，為了可讀性都不會使用截圖拐揭，而是用代碼編寫，在代碼頭部添加注釋以方便閱讀代碼的人知道代碼的編譯環(huán)境和編譯細(xì)節(jié)奕塑。
代碼會包含使用的編輯器版本
// v6.26.0
包含使用的編譯包
// es2016
結(jié)語
由于 ES 的新特性主要包含兩個方面堂污，一個是對現(xiàn)有對象的擴(kuò)展，比如 Object.assing()龄砰；另一方面是對語法的擴(kuò)展盟猖，比如新語法和語法糖。這個「3分鐘」 系列也將著重介紹對語法的擴(kuò)展寝贡。
謝謝扒披。
羅小黑寫寫文字
如果喜歡文章 請留下一個贊~
如果喜歡文章 分享給更多人~自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
轉(zhuǎn)載時請保留原文鏈接 以保證可及時獲取對文章的訂正和修改
