babel插件入門-AST

目錄

• Babel簡介
• Babel運行原理
• AST解析
• AST轉換
• 寫一個Babel插件

Babel簡介

Babel 是一個 JavaScript 編譯器,它能將es2015,react等低端瀏覽器沒法識別的語言，進行編譯。

上圖的左邊代碼中有箭頭函數，Babel將進行了源碼轉換，下面咱們來看Babel的運行原理。

Babel運行原理

Babel 的三個主要處理步驟分別是：

解析（parse），轉換（transform），生成（generate）。.

其過程分解用語言描述的話，就是下面這樣：

解析

使用 <font color=Chocolate>babylon</font> 解析器對輸入的源代碼字符串進行解析並生成初始 AST（File.prototype.parse）

利用 <font color=Chocolate>babel-traverse</font> 這個獨立的包對 AST 進行<font color=Chocolate>遍歷</font>，並解析出整個樹的 <font color=Chocolate>path</font>，經過掛載的 metadataVisitor 讀取對應的元信息，這一步叫 set AST 過程

轉換

transform 過程：遍歷 AST 樹並應用各 <font color=Chocolate>transformers（plugin）</font> 生成變換後的 AST 樹

babel 中最核心的是 <font color=Chocolate>babel-core</font>，它向外暴露出 babel.transform 接口。

let result = babel.transform(code, {
    plugins: [
        arrayPlugin
    ]
})

生成

利用 <font color=Chocolate>babel-generator</font> 將 <font color=Chocolate>AST</font> 樹輸出爲轉碼後的代碼字符串

AST解析

AST解析會把拿到的語法，進行樹形遍歷，對語法的每一個節點進行響應的變化和改造再生產新的代碼字符串

節點（node）

AST將開頭提到的箭頭函數轉根據節點換爲節點樹

ES2015箭頭函數

codes.map(code=>{
    return code.toUpperCase()
})

AST樹形遍歷轉換後的結構

{
    type:"ExpressionStatement",
    expression:{
        type:"CallExpression"
        callee:{
            type:"MemberExpression",
            computed:false
            object:{
                type:"Identifier",
                name:"codes"
            }
            property:{
                type:"Identifier",
                name:"map"
            }
            range:[]
        }
        arguments:{
            {
                type:"ArrowFunctionExpression",
                id:null,
                params:{
                    type:"Identifier",
                    name:"code"，
                    range:[]
                }
                body:{
                    type:"BlockStatement"
                    body:{
                        type:"ReturnStatement",
                        argument:{
                            type:"CallExpression",
                            callee:{
                                type:"MemberExpression"
                                computed:false
                                object:{
                                    type:"Identifier"
                                    name:"code"
                                    range:[]
                                }
                                property:{
                                    type:"Identifier"
                                    name:"toUpperCase"
                                }
                                range:[]
                            }
                            range:[]
                        }
                    }
                    range:[]
                }
                generator:false
                expression:false
                async:false
                range:[]
            }
        }
    }
}

咱們從 ExpressionStatement開始往樹形結構裏面走，看到它的內部屬性有callee，type，arguments，因此咱們再依次訪問每個屬性及它們的子節點。

因而就有了以下的順序

進入  ExpressionStatement
進入  CallExpression
進入  MemberExpression
進入  Identifier
離開  Identifier
進入  Identifier
離開  Identifier
離開  MemberExpression
進入  ArrowFunctionExpression
進入  Identifier
離開  Identifier
進入  BlockStatement
進入  ReturnStatement
進入  CallExpression
進入  MemberExpression
進入  Identifier
離開  Identifier
進入  Identifier
離開  Identifier
離開  MemberExpression
離開  CallExpression
離開  ReturnStatement
離開  BlockStatement
離開  ArrowFunctionExpression
離開  CallExpression
離開  ExpressionStatement
離開  Program

Babel 的轉換步驟全都是這樣的遍歷過程。（有點像koa的洋蔥模型？？）

AST轉換

解析好樹結構後，咱們手動對箭頭函數進行轉換。

對比兩張圖，發現不同的地方就是兩個函數的arguments.type

解析代碼

let babel = require('babel-core');//babel核心庫
let types = require('babel-types');
let code = `codes.map(code=>{return code.toUpperCase()})`;//轉換語句

let visitor = {
    ArrowFunctionExpression(path) {//定義須要轉換的節點
        let params = path.node.params
        let blockStatement = path.node.body
        let func = types.functionExpression(null, params, blockStatement, false, false)
        path.replaceWith(func) //
    }
}

let arrayPlugin = { visitor }
let result = babel.transform(code, {
    plugins: [
        arrayPlugin
    ]
})
console.log(result.code)

注意： ArrowFunctionExpression() { ... } 是 ArrowFunctionExpression: { enter() { ... } } 的簡寫形式。

<font color=Chocolate>Path 是一個對象，它表示兩個節點之間的鏈接。</font>

解析步驟

• 定義須要轉換的節點

ArrowFunctionExpression(path) {
        ......
    }

• 建立用來替換的節點

types.functionExpression(null, params, blockStatement, false, false)

babel-types文檔連接

• 在node節點上找到須要的參數
• replaceWith(替換)

寫一個Babel插件

從一個接收了 babel 對象做爲參數的 function 開始。

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

接着返回一個對象，其 visitor 屬性是這個插件的主要節點訪問者。

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

咱們平常引入依賴的時候，會將整個包引入，致使打包後的代碼太冗餘，加入了許多不須要的模塊，好比index.js三行代碼，打包後的文件大小就達到了483 KiB,

index.js

import { flatten, join } from "lodash";
let arr = [1, [2, 3], [4, [5]]];
let result = _.flatten(arr);

因此咱們此次的目的是將

import { flatten, join } from "lodash";

轉換爲從而只引入兩個lodash模塊，減小打包體積

import flatten from "lodash/flatten";
import join from "lodash/join";

實現步驟以下：

1. 在項目下的node_module中新建文件夾 <font color=Chocolate>babel-plugin-extraxt</font>

注意：babel插件文件夾的定義方式是 babel-plugin-插件名
咱們能夠在.babelrc的plugin中引入自定義插件 或者在webpack.config.js的loader options中加入自定義插件

1. 在babel-plugin-extraxt新建index.js

module.exports = function ({types:t}) {
    return {
        // 對import轉碼
        visitor:{
            ImportDeclaration(path, _ref = { opts: {} }) {
                const specifiers = path.node.specifiers;
                const source = path.node.source;
                // 只有libraryName知足纔會轉碼
                if (_ref.opts.library == source.value && (!t.isImportDefaultSpecifier(specifiers[0]))) { //_ref.opts是傳進來的參數
                    var declarations = specifiers.map((specifier) => {      //遍歷  uniq extend flatten cloneDeep
                        return t.ImportDeclaration(                         //建立importImportDeclaration節點
                            [t.importDefaultSpecifier(specifier.local)],
                            t.StringLiteral(`${source.value}/${specifier.local.name}`)
                        )
                    })
                    path.replaceWithMultiple(declarations)
                }
            }
        }
    };
}

1. 修改<font color=Chocolate>webpack.prod.config.js</font>中babel-loader的配置項，在plugins中添加自定義的插件名

rules: [{
    test: /\.js$/,
    loader: 'babel-loader',
    options: {
        presets: ["env",'stage-0'],
        plugins: [
            ["extract", { "library":"lodash"}],
            ["transform-runtime", {}]
        ]
    }
}]

注意：plugins 的插件使用順序是順序的，而 preset 則是逆序的。因此上面的執行方式是extract>transform-runtime>env>stage-0

1. 運行引入了自定義插件的webpack.config.js

打包文件如今爲21.4KiB,明顯減少，自定義插件成功！~

插件文件目錄

YUAN-PLUGINS
|
| - node_modules
|   |
|   | - babel-plugins-extract
|           |
|           index.js
|   
| - src
|   | - index.js
|
| - webpack.config.js

以爲好玩就關注一下~歡迎你們收藏寫評論~~~