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

Babel簡介

Babel運行原理

AST解析

AST轉換

寫一個Babel插件

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

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

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

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

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

解析

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

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

轉換

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

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

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

生成

利用 babel-generator 將 AST 樹輸出為轉碼后的代碼字符串

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

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的洋蔥模型？？）

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

對比兩張圖，發現不一樣的地方就是兩個函數的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() { ... } } 的簡寫形式。

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

解析步驟

定義需要轉換的節點

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

創建用來替換的節點

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

babel-types文檔鏈接

在node節點上找到需要的參數

replaceWith(替換)

從一個接收了 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";

實現步驟如下：

在項目下的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轉碼
        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)
                }
            }
        }
    };
}

修改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 則是逆序的。所以上面的執行方式是extract>transform-runtime>env>stage-0

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

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

插件文件目錄

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