#每日一記# 3分鐘從 es6+ 編譯成 es5 的代碼裏學習知識

時間 2019-11-08

標籤每日 3分 es6 編譯 es5 代碼學習知識欄目 JavaScript 简体版

原文原文鏈接

新系列導讀

學習編程語言是一件鍥而不捨的事情，從學會簡單的語法就能寫出程序，到理解類型和設計模式，再到考慮代碼的組織架構。誰不是從這樣一點點深刻和積累的呢？入門老是輕鬆又使人愉悅的，但隨着知識點愈來愈多學習的曲線卻驟然陡峭。但隨着對語言的深刻理解，再回頭來從新審閱基本的知識，又會有柳暗花明又一村的豁然感，「啊，原來是這樣的」那種感受。es6

這個**「3分鐘」**系列將利用 babel 在線的實時編譯工具，來學習分析 es6+ 的部分特性。經過編譯後的 es5 代碼，咱們能夠從中瞭解到 es6+ 特性的實現細節，更好的掌握新特性的適用性。編程

做爲系列的第一篇，先介紹這個 babel 在線實時編譯工具。設計模式

babel

「今天，使用下一代 Javascript 編程」，正如 babel 官網的標語，babel 正是爲抹平 高速擴展的 JS 標準 和 緩慢實現標準的瀏覽器 產生的鴻溝而出現的。babel 最大的功能就是將瀏覽器還未支持的語法編譯成低版本 js 語法，讓其能正常運行。瀏覽器

首先打開頁面 babel 在線實時編譯bash

界面分爲三大區域：設置區、源碼區 和 編譯區。babel

設置區

主要進行編譯方式的設置和編譯環境的設置。架構

咱們主要關心編譯環境（PRESETS) 的設置，好比你但願引入的環境編譯包(lib)。圖中所示的就是引入了 es2015 和 stage-3 兩個編譯包，編譯器就會先對源碼進行 stage-3 的特性進行編譯，再對 es2015 的特性進行編譯。須要注意的是，若是隻開啓 es2015 那麼只會編譯 es2015 中新增的特性，更加新穎的特性就沒法識別出來。編程語言

讓咱們來舉個例子：箭頭函數是 es2015 的新特性，而算數運算符冪運算 ** 是 es2016 的新特性，那麼在編譯環境裏只選擇 es2015 會發生什麼呢？編輯器

// v6.26.0
// presets: es2015
// 源碼區
let foo = {
    bar: () => {
    	return true;
    },
    baz: 10 ** 2,
}

// 編譯區
"use strict";

var foo = {
  bar: function bar() { // 只有 es2015 的箭頭函數被編譯了 
    return true;
  },
  baz: 10 ** 2
};
複製代碼

若是在編譯環境裏只選擇 es2016 會發生什麼呢？函數

// v6.26.0
// presets: es2016
// 源碼區
let foo = {
    bar: () => {
    	return true;
    },
    baz: 10 ** 2,
}

// 編譯區
let foo = {
    bar: () => {
        return true;
    },
    baz: Math.pow(10, 2) // 只有 es2016 的冪運算符被編譯了
};
複製代碼

因此若是想讓全部新特性都被編譯成 es5 那麼最好同時選擇 es2015 和 stage-3 兩個編譯包。

// v6.26.0
// presets: es2015 stage-3
// 源碼區
let foo = {
    bar: () => {
    	return true;
    },
    baz: 10 ** 2,
}

// 編譯區
"use strict";

var foo = {
    bar: function bar() {
        return true;
    },
    baz: Math.pow(10, 2)
};

// 特性都被編譯了
複製代碼