面試官:說下babel?不太了解辈挂,卒

參考文檔 Babel 插件手冊

Babel的作用

Babel是一個(gè)JavaScript編譯器

很多瀏覽器目前還不支持ES6的代碼,Babel的作用就是把瀏覽器不資辭的代碼編譯成資辭的代碼。

注意很重要的一點(diǎn)就是惠赫,Babel只是轉(zhuǎn)譯新標(biāo)準(zhǔn)引入的語法,比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù), 但是對于新標(biāo)準(zhǔn)引入的新的原生對象故黑,部分原生對象新增的原型方法儿咱,新增的API等(如SetPromise)场晶,這些Babel是不會轉(zhuǎn)譯的混埠,需要引入polyfill來解決。

API

Babel實(shí)際上是一組模塊的集合诗轻。

@babel/core

Babel 的編譯器钳宪,核心 API 都在這里面,比如常見的transformparse吏颖。

npm i @babel/core -D
  • 使用
import { transform } from '@babel/core';
import * as babel from '@babel/core';
  • transform

babel.transform(code: string, options?: Object)

babel.transform(code, options, function(err, result) {
  result; // => { code, map, ast }
});
  • parse

babel.parse(code: string, options?: Object, callback: Function)

@babel/cli

cli是命令行工具, 安裝了@babel/cli就能夠在命令行中使用babel 命令來編譯文件搔体。

npm i @babel/core @babel/cli -D
  • 使用
babel script.js

Note: 因?yàn)闆]有全局安裝@babel/cli, 建議用npx命令來運(yùn)行,或者./node_modules/.bin/babel半醉,關(guān)于npx命令疚俱,可以看下官方文檔

@babel/node

直接在node環(huán)境中,運(yùn)行 ES6 的代碼

  • 使用
npx babel-node script.js

babylon

Babel的解析器

首先缩多,安裝一下這個(gè)插件呆奕。

npm i babylon -S

先從解析一個(gè)代碼字符串開始:

// src/index.js
import * as babylon from 'babylon';

const code = `function add(m, n) {
  return m + n;
}`;

babylon.parse(code);
npx babel-node src/index.js
Node {
   type: "File",
   start: 0,
   end: 38,
   loc: SourceLocation {...},
   program: Node {...},
   comments: [],
   tokens: [...]
}

babel-traverse

用于對 AST 的遍歷,維護(hù)了整棵樹的狀態(tài)衬吆,并且負(fù)責(zé)替換梁钾、移除和添加節(jié)點(diǎn)。

運(yùn)行以下命令安裝:

npm i babel-traverse -S
import * as babylon from 'babylon';
import traverse from 'babel-traverse';

const code = `function add(m, n) {
  return m + n;
}`;

const ast = babylon.parse(code);

traverse(ast, {
  enter(path) {
    if (
      path.node.type === 'Identifier' &&
      path.node.name === 'm'
    ) {
      // do something
    }
  }
});

babel-types

用于 AST 節(jié)點(diǎn)的 Lodash 式工具庫, 它包含了構(gòu)造逊抡、驗(yàn)證以及變換 AST 節(jié)點(diǎn)的方法陈轿,對編寫處理 AST 邏輯非常有用。

npm i babel-types -S
import traverse from 'babel-traverse';
import * as t from 'babel-types';

traverse(ast, {
  enter(path) {
    if (t.isIdentifier(path.node, { name: 'm' })) {
      // do something
    }
  }
});

babel-generator

Babel 的代碼生成器秦忿,它讀取AST并將其轉(zhuǎn)換為代碼和源碼映射(sourcemaps)

npm i babel-generator -S
import * as babylon from 'babylon';
import generate from 'babel-generator';

const code = `function add(m, n) {
  return m + n;
}`;

const ast = babylon.parse(code);

generate(ast, {}, code);
// {
//   code: "...",
//   map: "...",
//   rawMappings: "..."
// }

Babel是怎么工作的

image

為了理解Babel麦射,我們從ES6最受歡迎的特性箭頭函數(shù)入手。

假設(shè)要把下面這個(gè)箭頭函數(shù)的Javascript代碼

(foo, bar) => foo + bar;

編譯成瀏覽器支持的代碼:

'use strict';
(function (foo, bar) {
  return foo + bar;
});

Babel的編譯過程和大多數(shù)其他語言的編譯器相似灯谣,可以分為三個(gè)階段:

  • 解析(Parsing):將代碼字符串解析成抽象語法樹潜秋。
  • 轉(zhuǎn)換(Transformation):對抽象語法樹進(jìn)行轉(zhuǎn)換操作。
  • 生成(Code Generation): 根據(jù)變換后的抽象語法樹再生成代碼字符串胎许。

解析(Parsing)

Babel拿到源代碼會把代碼抽象出來峻呛,變成AST(抽象語法樹),洋文是Abstract Syntax Tree辜窑。

抽象語法樹是源代碼的抽象語法結(jié)構(gòu)的樹狀表示钩述,樹上的每個(gè)節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu),這所以說是抽象的穆碎,是因?yàn)槌橄笳Z法樹并不會表示出真實(shí)語法出現(xiàn)的每一個(gè)細(xì)節(jié)牙勘,比如說,嵌套括號被隱含在樹的結(jié)構(gòu)中所禀,并沒有以節(jié)點(diǎn)的形式呈現(xiàn)方面。它們主要用于源代碼的簡單轉(zhuǎn)換。

箭頭函數(shù)(foo, bar) => foo + bar;的AST長這樣:

{
  "type": "Program",
  "start": 0,
  "end": 202,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 179,
      "end": 202,
      "expression": {
        "type": "ArrowFunctionExpression",
        "start": 179,
        "end": 202,
        "id": null,
        "expression": true,
        "generator": false,
        "params": [
          {
            "type": "Identifier",
            "start": 180,
            "end": 183,
            "name": "foo"
          },
          {
            "type": "Identifier",
            "start": 185,
            "end": 188,
            "name": "bar"
          }
        ],
        "body": {
          "type": "BinaryExpression",
          "start": 193,
          "end": 202,
          "left": {
            "type": "Identifier",
            "start": 193,
            "end": 196,
            "name": "foo"
          },
          "operator": "+",
          "right": {
            "type": "Identifier",
            "start": 199,
            "end": 202,
            "name": "bar"
          }
        }
      }
    }
  ],
  "sourceType": "module"
}

上面的AST描述了源代碼的每個(gè)部分以及它們之間的關(guān)系色徘,可以自己在這里試一下astexplorer恭金。

AST是怎么來的?解析過程分為兩個(gè)步驟:

  • 分詞:將整個(gè)代碼字符串分割成語法單元數(shù)組

Javascript代碼中的語法單元主要指如標(biāo)識符(if/else褂策、return横腿、function)颓屑、運(yùn)算符、括號耿焊、數(shù)字揪惦、字符串、空格等等能被解析的最小單元

[
    {
        "type": "Punctuator",
        "value": "("
    },
    {
        "type": "Identifier",
        "value": "foo"
    },
    {
        "type": "Punctuator",
        "value": ","
    },
    {
        "type": "Identifier",
        "value": "bar"
    },
    {
        "type": "Punctuator",
        "value": ")"
    },
    {
        "type": "Punctuator",
        "value": "=>"
    },
    {
        "type": "Identifier",
        "value": "foo"
    },
    {
        "type": "Punctuator",
        "value": "+"
    },
    {
        "type": "Identifier",
        "value": "bar"
    }
]
  • 語法分析:建立分析語法單元之間的關(guān)系

語義分析則是將得到的詞匯進(jìn)行一個(gè)立體的組合搀别,確定詞語之間的關(guān)系∥惨郑考慮到編程語言的各種從屬關(guān)系的復(fù)雜性歇父,語義分析的過程又是在遍歷得到的語法單元組,相對而言就會變得更復(fù)雜再愈。

簡單來說語義分析既是對語句和表達(dá)式識別榜苫,這是個(gè)遞歸過程,在解析中翎冲,Babel 會在解析每個(gè)語句和表達(dá)式的過程中設(shè)置一個(gè)暫存器垂睬,用來暫存當(dāng)前讀取到的語法單元,如果解析失敗抗悍,就會返回之前的暫存點(diǎn)驹饺,再按照另一種方式進(jìn)行解析,如果解析成功缴渊,則將暫存點(diǎn)銷毀赏壹,不斷重復(fù)以上操作,直到最后生成對應(yīng)的語法樹衔沼。

轉(zhuǎn)換(Transformation)

Plugins

插件應(yīng)用于babel的轉(zhuǎn)譯過程蝌借,尤其是第二個(gè)階段Transformation,如果這個(gè)階段不使用任何插件指蚁,那么babel會原樣輸出代碼菩佑。

Presets

babel官方幫我們做了一些預(yù)設(shè)的插件集,稱之為preset凝化,這樣我們只需要使用對應(yīng)的preset就可以了稍坯。每年每個(gè)preset只編譯當(dāng)年批準(zhǔn)的內(nèi)容。 而babel-preset-env 相當(dāng)于 es2015 搓劫,es2016 劣光,es2017 及最新版本。

Plugin/Preset 路徑

如果 plugin 是通過 npm 安裝糟把,可以傳入 plugin 名字給 babel绢涡,babel 將檢查它是否安裝在node_modules

"plugins": ["babel-plugin-myPlugin"]

也可以指定你的 plugin/preset 的相對或絕對路徑。

"plugins": ["./node_modules/asdf/plugin"]

Plugin/Preset 排序

如果兩次轉(zhuǎn)譯都訪問相同的節(jié)點(diǎn)遣疯,則轉(zhuǎn)譯將按照 plugin 或 preset 的規(guī)則進(jìn)行排序然后執(zhí)行雄可。

  • Plugin 會運(yùn)行在 Preset 之前凿傅。
  • Plugin 會從第一個(gè)開始順序執(zhí)行。
  • Preset 的順序則剛好相反(從最后一個(gè)逆序執(zhí)行)数苫。

例如:

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

將先執(zhí)行transform-decorators-legacy再執(zhí)行transform-class-properties

但 preset 是反向的

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
}

會按以下順序運(yùn)行: stage-2聪舒, react, 最后es2015虐急。

生成(Code Generation)

babel-generator通過 AST 樹生成 ES5 代碼

編寫一個(gè)Babel插件

基礎(chǔ)的東西講了些箱残,下面說下具體如何寫插件。

插件格式

先從一個(gè)接收了當(dāng)前babel對象作為參數(shù)的function開始止吁。

export default function(babel) {
  // plugin contents
}

我們經(jīng)常會這樣寫

export default function({ types: t }) {
    //
}

接著返回一個(gè)對象被辑,其visitor屬性是這個(gè)插件的主要訪問者。

export default function({ types: t }) {
  return {
    visitor: {
      // visitor contents
    }
  };
};

visitor中的每個(gè)函數(shù)接收2個(gè)參數(shù):pathstate

export default function({ types: t }) {
  return {
    visitor: {
      CallExpression(path, state) {}
    }
  };
};

寫一個(gè)簡單的插件

我們寫一個(gè)簡單的插件敬惦,把所有定義變量名為a的換成b, 先從astexplorer看下var a = 1的 AST

{
  "type": "Program",
  "start": 0,
  "end": 10,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 9,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 9,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 5,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 8,
            "end": 9,
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "module"
}

從這里看盼理,要找的節(jié)點(diǎn)類型就是VariableDeclarator,下面開搞

export default function({ types: t }) {
  return {
    visitor: {
      VariableDeclarator(path, state) {
        if (path.node.id.name == 'a') {
          path.node.id = t.identifier('b')
        }
      }
    }
  }
}

我們要把id屬性是 a 的替換成 b 就好了俄删。但是這里不能直接path.node.id.name = 'b'宏怔。如果操作的是object,就沒問題畴椰,但是這里是 AST 語法樹臊诊,所以想改變某個(gè)值,就是用對應(yīng)的 AST 來替換斜脂,現(xiàn)在我們用新的標(biāo)識符來替換這個(gè)屬性妨猩。

測試一下

import * as babel from '@babel/core';
const c = `var a = 1`;

const { code } = babel.transform(c, {
  plugins: [
    function({ types: t }) {
      return {
        visitor: {
          VariableDeclarator(path, state) {
            if (path.node.id.name == 'a') {
              path.node.id = t.identifier('b')
            }
          }
        }
      }
    }
  ]
})

console.log(code); // var b = 1

實(shí)現(xiàn)一個(gè)簡單的按需打包功能

例如我們要實(shí)現(xiàn)把import { Button } from 'antd'轉(zhuǎn)成import Button from 'antd/lib/button'

通過對比 AST 發(fā)現(xiàn),specifiers里的typesource不同秽褒。

// import { Button } from 'antd'
"specifiers": [
    {
        "type": "ImportSpecifier",
        ...
    }
]
// import Button from 'antd/lib/button'
"specifiers": [
    {
        "type": "ImportDefaultSpecifier",
        ...
    }
]
import * as babel from '@babel/core';
const c = `import { Button } from 'antd'`;

const { code } = babel.transform(c, {
  plugins: [
    function({ types: t }) {
      return {
        visitor: {
          ImportDeclaration(path) {
            const { node: { specifiers, source } } = path;
            if (!t.isImportDefaultSpecifier(specifiers[0])) { // 對 specifiers 進(jìn)行判斷
              const newImport = specifiers.map(specifier => (
                t.importDeclaration(
                  [t.ImportDefaultSpecifier(specifier.local)],
                  t.stringLiteral(`${source.value}/lib/${specifier.local.name}`)
                )
              ))
              path.replaceWithMultiple(newImport)
            }
          }
        }
      }
    }
  ]
})

console.log(code); // import Button from "antd/lib/Button";

總結(jié)

主要介紹了一下幾個(gè)babel的 API壶硅,和babel編譯代碼的過程以及簡單編寫了一個(gè)babel插件

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市销斟,隨后出現(xiàn)的幾起案子庐椒,更是在濱河造成了極大的恐慌,老刑警劉巖蚂踊,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件约谈,死亡現(xiàn)場離奇詭異,居然都是意外死亡犁钟,警方通過查閱死者的電腦和手機(jī)棱诱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涝动,“玉大人迈勋,你說我怎么就攤上這事〈姿冢” “怎么了靡菇?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵重归,是天一觀的道長。 經(jīng)常有香客問我厦凤,道長鼻吮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任较鼓,我火速辦了婚禮椎木,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘博烂。我一直安慰自己香椎,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布脖母。 她就那樣靜靜地躺著士鸥,像睡著了一般闲孤。 火紅的嫁衣襯著肌膚如雪谆级。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天讼积,我揣著相機(jī)與錄音肥照,去河邊找鬼。 笑死勤众,一個(gè)胖子當(dāng)著我的面吹牛舆绎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播们颜,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼吕朵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窥突?” 一聲冷哼從身側(cè)響起努溃,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎阻问,沒想到半個(gè)月后梧税,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡称近,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年第队,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刨秆。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凳谦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出衡未,到底是詐尸還是另有隱情晾蜘,我是刑警寧澤邻眷,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站剔交,受9級特大地震影響肆饶,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜岖常,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一驯镊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧竭鞍,春花似錦板惑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至晒夹,卻和暖如春裆馒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背丐怯。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工喷好, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人读跷。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓梗搅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親效览。 傳聞我的和親對象是個(gè)殘疾皇子无切,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • babel官網(wǎng) babel 介紹 Babel 是一個(gè)通用的多用途 JavaScript 編譯器。通過 Babel ...
    鋒享前端閱讀 1,826評論 0 10
  • 前言 半年前也寫過一篇babel的簡單使用文章丐枉,當(dāng)時(shí)看了下babel的文檔哆键,但是很多地方還不理解,所以文章里沒有怎...
    mercurygear閱讀 46,060評論 9 100
  • babel官網(wǎng) babel 介紹 Babel 是一個(gè)通用的多用途 JavaScript 編譯器矛洞。通過 Babel ...
    不得不愛XIN閱讀 1,145評論 0 9
  • 了解 Babel 各個(gè)模塊 本文所研究的是 babel 6 版本洼哎。babel 6 是 2015年10月30號 發(fā)布...
    shianqi閱讀 4,583評論 0 7
  • babel 7 的使用的個(gè)人理解 最近看了很多關(guān)于babel的使用方法,大部分在一些點(diǎn)上都沒有說明白沼本,同時(shí)給出的代...
    zshawk1982閱讀 21,030評論 14 43