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

Babel簡(jiǎn)介

Babel運(yùn)行原理

AST解析

AST轉(zhuǎn)換

寫(xiě)一個(gè)Babel插件

Babel 是一個(gè) JavaScript 編譯器,它能將es2015,react等低端瀏覽器無(wú)法識(shí)別的語(yǔ)言，進(jìn)行編譯。

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

Babel 的三個(gè)主要處理步驟分別是：

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

其過(guò)程分解用語(yǔ)言描述的話，就是下面這樣：

解析

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

利用 babel-traverse 這個(gè)獨(dú)立的包對(duì) AST 進(jìn)行遍歷，并解析出整個(gè)樹(shù)的 path，通過(guò)掛載的 metadataVisitor 讀取對(duì)應(yīng)的元信息，這一步叫 set AST 過(guò)程

轉(zhuǎn)換

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

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

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

生成

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

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

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

ES2015箭頭函數(shù)

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

AST樹(shù)形遍歷轉(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開(kāi)始往樹(shù)形結(jié)構(gòu)里面走，看到它的內(nèi)部屬性有callee，type，arguments，所以我們?cè)僖来卧L問(wèn)每一個(gè)屬性及它們的子節(jié)點(diǎn)。

于是就有了如下的順序

進(jìn)入  ExpressionStatement
進(jìn)入  CallExpression
進(jìn)入  MemberExpression
進(jìn)入  Identifier
離開(kāi)  Identifier
進(jìn)入  Identifier
離開(kāi)  Identifier
離開(kāi)  MemberExpression
進(jìn)入  ArrowFunctionExpression
進(jìn)入  Identifier
離開(kāi)  Identifier
進(jìn)入  BlockStatement
進(jìn)入  ReturnStatement
進(jìn)入  CallExpression
進(jìn)入  MemberExpression
進(jìn)入  Identifier
離開(kāi)  Identifier
進(jìn)入  Identifier
離開(kāi)  Identifier
離開(kāi)  MemberExpression
離開(kāi)  CallExpression
離開(kāi)  ReturnStatement
離開(kāi)  BlockStatement
離開(kāi)  ArrowFunctionExpression
離開(kāi)  CallExpression
離開(kāi)  ExpressionStatement
離開(kāi)  Program

Babel 的轉(zhuǎn)換步驟全都是這樣的遍歷過(guò)程。（有點(diǎn)像koa的洋蔥模型？？）

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

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

解析代碼

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

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

Path 是一個(gè)對(duì)象，它表示兩個(gè)節(jié)點(diǎn)之間的連接。

解析步驟

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

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

創(chuàng)建用來(lái)替換的節(jié)點(diǎn)

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

babel-types文檔鏈接

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

replaceWith(替換)

從一個(gè)接收了 babel 對(duì)象作為參數(shù)的 function 開(kāi)始。

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

接著返回一個(gè)對(duì)象，其 visitor 屬性是這個(gè)插件的主要節(jié)點(diǎn)訪問(wèn)者。

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

我們?nèi)粘Ｒ胍蕾嚨臅r(shí)候，會(huì)將整個(gè)包引入，導(dǎo)致打包后的代碼太冗余，加入了許多不需要的模塊，比如index.js三行代碼，打包后的文件大小就達(dá)到了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)換為從而只引入兩個(gè)lodash模塊，減少打包體積

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

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

在項(xiàng)目下的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 {
        // 對(duì)import轉(zhuǎn)碼
        visitor:{
            ImportDeclaration(path, _ref = { opts: {} }) {
                const specifiers = path.node.specifiers;
                const source = path.node.source;
                // 只有l(wèi)ibraryName滿足才會(huì)轉(zhuǎn)碼
                if (_ref.opts.library == source.value && (!t.isImportDefaultSpecifier(specifiers[0]))) { //_ref.opts是傳進(jìn)來(lái)的參數(shù)
                    var declarations = specifiers.map((specifier) => {      //遍歷  uniq extend flatten cloneDeep
                        return t.ImportDeclaration(                         //創(chuàng)建importImportDeclaration節(jié)點(diǎn)
                            [t.importDefaultSpecifier(specifier.local)],
                            t.StringLiteral(`${source.value}/${specifier.local.name}`)
                        )
                    })
                    path.replaceWithMultiple(declarations)
                }
            }
        }
    };
}

修改webpack.prod.config.js中babel-loader的配置項(xiàng)，在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

運(yùn)行引入了自定義插件的webpack.config.js

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

插件文件目錄

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