每日一記 - 但并不日更

新系列導(dǎo)讀

學(xué)習(xí)編程語言是一件持之以恒的事情，從學(xué)會簡單的語法就能寫出程序，到理解類型和設(shè)計(jì)模式，再到考慮代碼的組織架構(gòu)。誰不是從這樣一點(diǎn)點(diǎn)深入和積累的呢？入門總是輕松又令人愉悅的，但隨著知識點(diǎn)越來越多學(xué)習(xí)的曲線卻驟然陡峭。但隨著對語言的深入理解，再回頭來重新審閱基本的知識，又會有柳暗花明又一村的豁然感，「啊，原來是這樣的」那種感覺。

這個(gè)「3分鐘」系列將利用 babel 在線的實(shí)時(shí)編譯工具，來學(xué)習(xí)分析 es6+ 的部分特性。通過編譯后的 es5 代碼，我們可以從中了解到 es6+ 特性的實(shí)現(xiàn)細(xì)節(jié)，更好的掌握新特性的適用性。

作為系列的第一篇，先介紹這個(gè) babel 在線實(shí)時(shí)編譯工具。

babel

「今天，使用下一代 Javascript 編程」，正如 babel 官網(wǎng)的標(biāo)語，babel 正是為抹平 高速擴(kuò)展的 JS 標(biāo)準(zhǔn) 和 緩慢實(shí)現(xiàn)標(biāo)準(zhǔn)的瀏覽器 產(chǎn)生的鴻溝而出現(xiàn)的。babel 最大的功能就是將瀏覽器還未支持的語法編譯成低版本 js 語法，讓其能正常運(yùn)行。

首先打開頁面 babel 在線實(shí)時(shí)編譯

界面

界面分為三大區(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 兩個(gè)編譯包，編譯器就會先對源碼進(jìn)行 stage-3 的特性進(jìn)行編譯，再對 es2015 的特性進(jìn)行編譯。需要注意的是，如果只開啟 es2015 那么只會編譯 es2015 中新增的特性，更加新穎的特性就無法識別出來。

讓我們來舉個(gè)例子：箭頭函數(shù)是 es2015 的新特性，而算數(shù)運(yùn)算符冪運(yùn)算 ** 是 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 的冪運(yùn)算符被編譯了
};

所以如果想讓所有新特性都被編譯成 es5 那么最好同時(shí)選擇 es2015 和 stage-3 兩個(gè)編譯包。

// 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ū)就能實(shí)時(shí)顯示編譯后的代碼。

示例解讀

在這個(gè)系列里的代碼示例，為了可讀性都不會使用截圖，而是用代碼編寫，在代碼頭部添加注釋以方便閱讀代碼的人知道代碼的編譯環(huán)境和編譯細(xì)節(jié)。

代碼會包含使用的編輯器版本

// v6.26.0

包含使用的編譯包

// es2016

結(jié)語

由于 ES 的新特性主要包含兩個(gè)方面，一個(gè)是對現(xiàn)有對象的擴(kuò)展，比如 Object.assing()；另一方面是對語法的擴(kuò)展，比如新語法和語法糖。這個(gè)「3分鐘」 系列也將著重介紹對語法的擴(kuò)展。

謝謝。

羅小黑寫寫文字

如果喜歡文章 請留下一個(gè)贊~
如果喜歡文章 分享給更多人~

在掘金中關(guān)注我
在簡書中關(guān)注我

自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
轉(zhuǎn)載時(shí)請保留原文鏈接 以保證可及時(shí)獲取對文章的訂正和修改