摘要：是一個對象，它表示兩個節(jié)點之間的連接。接著返回一個對象，其屬性是這個插件的主要節(jié)點訪問者。所以上面的執(zhí)行方式是運行引入了自定義插件的打包文件現(xiàn)在為明顯減小，自定義插件成功插件文件目錄覺得好玩就關(guān)注一下歡迎大家收藏寫評論

Babel簡介

Babel運行原理

AST解析

AST轉(zhuǎn)換

寫一個Babel插件

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

上圖的左邊代碼中有箭頭函數(shù)，Babel將進行了源碼轉(zhuǎn)換，下面我們來看Babel的運行原理。

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

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

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

解析

使用 babylon 解析器對輸入的源代碼字符串進行解析并生成初始 AST（File.prototype.parse）

利用 babel-traverse 這個獨立的包對 AST 進行遍歷，并解析出整個樹的 path，通過掛載的 metadataVisitor 讀取對應(yīng)的元信息，這一步叫 set AST 過程

轉(zhuǎn)換

transform 過程：遍歷 AST 樹并應(yīng)用各 transformers（plugin） 生成變換后的 AST 樹

babel 中最核心的是 babel-core，它向外暴露出 babel.transform 接口。

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

生成

利用 babel-generator 將 AST 樹輸出為轉(zhuǎn)碼后的代碼字符串

AST解析會把拿到的語法，進行樹形遍歷，對語法的每個節(jié)點進行響應(yīng)的變化和改造再生產(chǎn)新的代碼字符串

AST將開頭提到的箭頭函數(shù)轉(zhuǎn)根據(jù)節(jié)點換為節(jié)點樹

ES2015箭頭函數(shù)

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

AST樹形遍歷轉(zhuǎn)換后的結(jié)構(gòu)

{
    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開始往樹形結(jié)構(gòu)里面走，看到它的內(nèi)部屬性有callee，type，arguments，所以我們再依次訪問每一個屬性及它們的子節(jié)點。

于是就有了如下的順序

進入  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 的轉(zhuǎn)換步驟全都是這樣的遍歷過程。（有點像koa的洋蔥模型？？）

解析好樹結(jié)構(gòu)后，我們手動對箭頭函數(shù)進行轉(zhuǎn)換。

對比兩張圖，發(fā)現(xiàn)不一樣的地方就是兩個函數(shù)的arguments.type

解析代碼

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

let visitor = {
    ArrowFunctionExpression(path) {//定義需要轉(zhuǎn)換的節(jié)點
        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() { ... } } 的簡寫形式。

Path 是一個對象，它表示兩個節(jié)點之間的連接。

解析步驟

定義需要轉(zhuǎn)換的節(jié)點

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

創(chuàng)建用來替換的節(jié)點

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

babel-types文檔鏈接

在node節(jié)點上找到需要的參數(shù)

replaceWith(替換)

從一個接收了 babel 對象作為參數(shù)的 function 開始。

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

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

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

我們?nèi)粘Ｒ胍蕾嚨臅r候，會將整個包引入，導(dǎo)致打包后的代碼太冗余，加入了許多不需要的模塊，比如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";

轉(zhuǎn)換為從而只引入兩個lodash模塊，減少打包體積

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

實現(xiàn)步驟如下：

在項目下的node_module中新建文件夾 babel-plugin-extraxt

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

在babel-plugin-extraxt新建index.js

module.exports = function ({types:t}) {
    return {
        // 對import轉(zhuǎn)碼
        visitor:{
            ImportDeclaration(path, _ref = { opts: {} }) {
                const specifiers = path.node.specifiers;
                const source = path.node.source;
                // 只有l(wèi)ibraryName滿足才會轉(zhuǎn)碼
                if (_ref.opts.library == source.value && (!t.isImportDefaultSpecifier(specifiers[0]))) { //_ref.opts是傳進來的參數(shù)
                    var declarations = specifiers.map((specifier) => {      //遍歷  uniq extend flatten cloneDeep
                        return t.ImportDeclaration(                         //創(chuàng)建importImportDeclaration節(jié)點
                            [t.importDefaultSpecifier(specifier.local)],
                            t.StringLiteral(`${source.value}/${specifier.local.name}`)
                        )
                    })
                    path.replaceWithMultiple(declarations)
                }
            }
        }
    };
}

修改webpack.prod.config.js中babel-loader的配置項，在plugins中添加自定義的插件名

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

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

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

打包文件現(xiàn)在為21.4KiB,明顯減小，自定義插件成功！~

插件文件目錄

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