《前端之路》之 Babel 下一代 JavaScript 語法編譯器

寫本章的內容的出發點主要是 爲了對於以前關於 JS 版本的一個總結，在以前的開發中，咱們始終對於 ECMAScript 的版本的更新不夠重視，以致於在後面的 開發過程當中，咱們始終會被各類新奇的語法打斷了咱們的思考思路，因此對於基礎的追求，是任什麼時候候都不能忘記的。否則會的框架再多，會玩兒的花樣再多，到頭來都只是API 。

另外 一個目的就是想作一個好玩的東西，就是 實時編譯所寫的高版本（ES2015+）的 JS 代碼。轉化成如今大部分瀏覽器能夠兼容的 ES5 、 ES3 等。

下面就正式介紹下 Babel （v7.0.0 ）

1、什麼是 Babel

Babel 是一個 JavaScript 編譯器，Babel 經過語法變換器支持最新版本的 JavaScript。

1-1 使用方法：

Babel 工具鏈中有不少工具可讓你輕鬆使用 Babel，不管你是「終端用戶」仍是構建中集成 Babel。本文是快速使用這些工具的指南，你能夠在文檔的「用法」部分中閱讀有關它們的更多信息。

1-1-1 ： CLI 用法

這裏介紹到的 cli 的用法其實對於大部分同窗來講不是常規用法。
由於這種用法每每出如今 各類 npm 的包、cli 構建工具集成當中，因此這裏，咱們只介紹下它的核心用法。

下載核心包  @babel/core

npm install --save-dev @babel/core

你能夠直接在 JavaScript 中 require 它並像下面這樣使用它

const babel = require("@babel/core");

babel.transform("code", optionsObject);

做爲終端用戶，你可能但願安裝其餘工具做爲 @babel/core 的接口，並能很好地集成在你的開發過程當中。即使如此，你仍可能須要查看其文檔頁面以瞭解這些選項，其中大部分選項也能夠經過其餘工具進行設置。

1-1-2 ：Plugins & Presets 用法

以插件 和 預處理 的方式，是咱們在開發過程當中更爲常見的方式。
一般咱們在 Vue 項目開發中使用的是 Plugins 的方式
在 React 項目開發中使用的是 Presets 的方式 下面的文章中，咱們分別來介紹 如何來使用。

1-1-3 ：Polyfill

@babel/polyfill 模塊包括 core-js 和自定義 regenerator runtime 來模擬完整的 ES2015+ 環境。
利用 Polyfill 更多的是來解決一個 瀏覽器的兼容 高版本的 ES 問題。可是每每由於這個包比較的大，因此仍是慎重使用。

2、 React、Vue 結合 Babel

如何在 React、Vue 項目中結合Webpack 使用 Babel

2-1 、React && Babel

上文中有介紹到 babel 配合 React 等使用方法。--- Presets。
預處理方案。

2-1-1: 如何使用

咱們配置完 webpack 和 React ，並啓動 server。
這個時候咱們看下咱們 react 的代碼

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <div>
      <h2>hhhh</h2>
    </div>
  );
};
ReactDom.render(<App />, document.getElementById("apps"));

這是一個最簡單的 react 的 demo 代碼展現：

結果咱們發現，咱們的終端 上顯示 ERROR:

ERROR in ./src/index.js 6:4
Module parse failed: Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| const App = () => {
|   return (
>     <div>
|       <h2>hhhh</h2>
|     </div>
 @ multi (webpack)-dev-server/client?http://localhost:8081 (webpack)/hot/dev-server.js ./src main[2]

TIPS: 這個時候大多數人看到這個 error 的時候其實都是懵逼的，特別對於新手到講，而後一部分機智的小夥子發現 已經超過了本身的 知識範圍了，就去 谷歌、百度去尋求幫助

不出意外，搜索引擎統一給出的答案就是 未配置 babel 的預處理，致使 webpack 沒法讀懂這個代碼是什麼意思。

這個時候，咱們來試着配置下咱們的 babel 的 presets. 可是如何配置呢？
上文中，咱們只是簡單的介紹了下，可是實際配置的文件應該是什麼樣子呢？

2-1-1-1 babel 配置的第一種配置方式：

根目錄建立 babel.config.js 文件。

module.exports = function() {
  const presets = [];
  const plugins = [];
  return {
    presets,
    plugins
  };
};

babel.config.js 的官方文檔在這裏 babel

2-1-1-2 babel 配置的第二種配置方式：

根目錄建立 .babelrc 文件 ( JSON 格式)。

{
    "presets": [],
    "plugins": [],
    "env": {}
}

2-1-1-3 兩種配置方式的方式都是大同小異 主要是配置的內容

下一個小節咱們就詳細介紹下 babel的plugins和presets解析

2-1-2: babel的plugins和presets解析

2-1-2-1：明確 ES201x 和 ESx 的關係

ES2015 =》 ES6
ES2016 =》 ES7
ES2017 =》 ES8

在 2015 年以前 ES3 是主流。

2-1-2-2：plugin

: babel的插件，在6.x版本以後babel必須要配合插件來進行工做

{
  "plugins": ["transform-es2015-arrow-functions"]
}

顧名思義， 這個插件就是爲了編譯 es6 的箭頭函數

2-1-2-3：preset

: babel插件集合的預設，包含某一部分的插件plugin

{
  "presets": ["es2015"]
}

這裏着重解釋下 presets 中 es2015 是什麼意思？

es2015 => babel-preset-es2015 (能夠將 es6 的 JS 代碼編譯爲 es5)
es2016 => babel-preset-es2016 (能夠將 es7 的 JS 代碼編譯爲 es6)
es2017 => babel-preset-es2017 (能夠將 es8 的 JS 代碼編譯爲 es7)
stage-x => babel-preset-stage-x (能夠將處於某一階段的js語法編譯爲正式版本的js代碼)

這裏再介紹下 stage-x， 提案共分爲五個階段：

• stage-0: 稻草人-只是一個大膽的想法
• stage-1: 提案-初步嘗試
• stage-2: 初稿-完成初步規範
• stage-3: 候選-完成規範和瀏覽器初步實現
• stage-4: 完成-將被添加到下一年發佈

2-1-2-4：preset env

當前 babel 推薦使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持範圍更廣，包含es2015 es2016 es2017的全部語法編譯，而且它能夠根據項目運行平臺的支持狀況自行選擇編譯版本。

使用方法：

{
  "presets": ["env", "stage-2"]
}

2-1-2-5： 插件中每一個訪問者都有排序問題

這意味着若是兩次轉譯都訪問相同的」程序」節點，則轉譯將按照 plugin 或 preset 的規則進行排序而後執行。

• Plugin 會運行在 Preset 以前。
• Plugin 會從第一個開始順序執行。ordering is first to last.
• Preset 的順序則恰好相反(從最後一個逆序執行)。

2-1-2-6: 總結：

上面項目的跑起來的時候依然仍是還有bug，下面就須要咱們來完善這一個問題，用上面學習到的內容

{
  "presets": ["env", "stage-1", "react"],
  "plugins": [
    ["transform-runtime", { "polyfill": false }],
    "transform-decorators-legacy"
  ]
}

每一部分的 插件也好，預處理文件也好。都會影響着整個項目，不少時候均爲 各個不一樣版本插件之間的兼容性問題，搞的很是頭痛，因此，看準插件，仔細閱讀其文檔是不可或缺的。

2-2 、Vue && Babel

Vue 的話，由於有 vue-cli 的存在，已經講 .babelrc 文件已經給用戶配置好了

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

3、Babel 使用 總結

Babel 的使用，是咱們對於 ES 的各類版本 的理解更好的幫助，在咱們實際的項目使用中也提供了 更多了可能。 在結合 webpack 使用的時候，presets、plugins 的配置。tips： 配置中 各個版本之間的兼容問題得異常注意。 好了，關於 babel 相關的 介紹和理解就到這裏，若是還有什麼疑惑🤔，歡迎來撩👏

---

關於 Babel 下一代 JavaScript 語法編譯器 的文章就介紹到這裏了，歡迎一塊兒來論道～

GitHub 地址：（歡迎 star 、歡迎推薦 : )

Babel 下一代 JavaScript 語法編譯器