在了解Babel之前我們有必要了解下AST， 什么是AST呢？

AST(抽象語法樹)

function square(n) {
  return n * n;
}

如上代碼可以被表示如下的一棵樹:

- FunctionDeclaration:
  - id:
    - Identifier:
      - name: square
  - params [1]
    - Identifier
      - name: n
  - body:
    - BlockStatement
      - body [1]
        - ReturnStatement
          - argument
            - BinaryExpression
              - operator: *
              - left
                - Identifier
                  - name: n
              - right
                - Identifier
                  - name: n

或是如下所示的 JavaScript Object（對象）:

{
  type: "FunctionDeclaration",
  id: {
    type: "Identifier",
    name: "square"
  },
  params: [{
    type: "Identifier",
    name: "n"
  }],
  body: {
    type: "BlockStatement",
    body: [{
      type: "ReturnStatement",
      argument: {
        type: "BinaryExpression",
        operator: "*",
        left: {
          type: "Identifier",
          name: "n"
        },
        right: {
          type: "Identifier",
          name: "n"
        }
      }
    }]
  }
}

AST每一層的結(jié)構(gòu)如下：

// 外層 節(jié)點（Node）
{
  type: "FunctionDeclaration",
  id: {...},
  params: [...],
  body: {...}
}

// 中層 節(jié)點（Node）
{
  type: "Identifier",
  name: ...
}

// 里層 節(jié)點（Node）
{
  type: "BinaryExpression",
  operator: ...,
  left: {...},
  right: {...}
}

// 每一層都有如下節(jié)點
interface Node {
  type: string;
}
每一個節(jié)點都會有 start，end，loc 這幾個屬性。用于描述該節(jié)點在原始代碼中的位置。

Babel原理

Babel解析成AST，然后插件更改AST，最后由Babel輸出代碼

Babel的三個主要處理步驟

解析（parse），轉(zhuǎn)換（transform），生成（generate）。

具體參考：https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md

Babel介紹

babel是一個 JavaScript 編譯器，主要用于將 ES5+ 版本的代碼轉(zhuǎn)換為向后兼容的js 語法(eg: es6->es5)，以便能夠運行在當前和舊版本的瀏覽器或其他環(huán)境中
例如：

// Babel 輸入： ES6 箭頭函數(shù)
[1, 2, 3].map((n) => n + 1);

// Babel 輸出： ES5 普通函數(shù)
[1, 2, 3].map(function(n) {
  return n + 1;
});

參考-手寫一個babel插件：https://juejin.im/post/5a9315e46fb9a0633a711f25