Babel解析

0100

我正在参加「掘金·启航计划」

1. 写在前面

本文主要的目的是为客户端的小伙伴揭开 Babel 神秘的面纱，从原理的角度看这个优秀的项目，掌握作者的设计思想，知其然亦知其所以然。网上已经有很多详细Babel 插件开发教程了，所以这里就不再浪费笔墨介绍怎么使用Babel。

1.1 什么是 Babel？

Babel 是一组工具的集合，为当前最流行的代码 JavaScript 编译器，与传统编译器不同的是 babel 只是将 js 语言在不同的代码规则之间进行转换，而不是转换成更低级别的机器码。

1.2 Babel 的使用场景

  • 语法转换：将 ECMAScript 2015+ 版本的代码（比如箭头函数）转换为低版本兼容的 JavaScript 语法。举个例子：Java6+ 中的 switch 才支持字符串，我们写的 switch("babel")...代码想跑到 jvm6 的虚拟机就要做一下转化，将字符串映射成一个整形。Babel 就是前端中此类场景的转换工具。
  • 源码转换：大名鼎鼎的 Taro 也是利用 Babel 将 React 语法转化成小程序模板。
  • 静态分析：在不需要执行代码的前提下对代码进行分析以及相应处理的一个过程，主要应用于语法检查、编译、代码高亮、代码转换、优化、压缩等等。
  • Others～～～

2. Babel 工作流程解析

1647057060674-cb84a8a4-bfb6-4de0-be2b-d95f44cc8f18.jpeg
Babel转换 JS 代码可以分成以下三个大步骤：

  • Parser（解析）：此过程接受转换之前的源码，输出 AST（抽象语法树）。在 babel 中负责此过程的包为 babel/parser；
  • Transform（转换）：此过程接受 Parser 输出的 AST（抽象语法树），输出转换后的 AST（抽象语法树）。在 babel 中负责此过程的包为 @babel/traverse；
  • Generator（生成）：此过程接受 Transform  输出的新 AST，输出转换后的源码。在 babel 中负责此过程的包为 @babel/generator；

知识点1：AST（抽象语法树）
抽象语法树，顾名思义是对代码字符串的抽象表示，为什么把他看作一棵树呢？我们借助 astexplorer 对 function add(a,b){return a + b}这个函数做一下解析

{

  "type": "Program",

  "start": 0,

  "end": 31,
  "body": [

    {

      "type": "FunctionDeclaration",
      "start": 0,

      "end": 31,
      "id": {
        "type": "Identifier",
        "start": 9,
        "end": 12,
        "name": "add"
      },
      "expression": false,
      "generator": false,
      "params": [
        {
          "type": "Identifier",
          "start": 13,
          "end": 14,
          "name": "a"
        },
        {
          "type": "Identifier",
          "start": 15,
          "end": 16,
          "name": "b"
        }
      ],
      "body": {
        "type": "BlockStatement",
        "start": 17,
        "end": 31,
        "body": [
          {
            "type": "ReturnStatement",
            "start": 18,
            "end": 30,
            "argument": {
              "type": "BinaryExpression",
              "start": 25,
              "end": 30,
              "left": {
                "type": "Identifier",
                "start": 25,
                "end": 26,
                "name": "a"
              },
              "operator": "+",
              "right": {
                "type": "Identifier",
                "start": 29,
                "end": 30,
                "name": "b"
              }
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

大家可以看到，上述代码被解析成了一个数据结构，这个数据结构的根节点是 Program ，根节点还包含一些子节点例如 FunctionDeclaration   Identifier BlockStatement 等等。这些节点有共同的地方比如都有 type 属性，也有不同的地方比如 ReturnStatement 就独有  argument 属性。这些节点的详细定义都能在 这里 找到。Babel 使用一个基于 ESTree 并修改过的 AST 规范，解析 JSX 使用的规范是 Facebook JSX AST 。

2.1 Parser

Parser过程可以分成 词法分析（Lexical Analysis） 与 语法分析（Syntactic Analysis） 两个子步骤。词法分析接收待转化的源码，输出 令牌流（可以看作是一个 tokens 的数组） ，语法分析接收 令牌流 输出 AST（抽象语法树）。

借鉴一下  babel-handbook  对词法分析的总结。以 n * n 为例

  • 经过词法分析后得到的令牌流：
[
  { type: { ... }, value: "n", start: 0, end: 1, loc: { ... } },
  { type: { ... }, value: "*", start: 2, end: 3, loc: { ... } },
  { type: { ... }, value: "n", start: 4, end: 5, loc: { ... } },
  ...
]

每一个type 有一组属性来描述该令牌：

{
  type: {
    label: 'name',
    keyword: undefined,
    beforeExpr: false,
    startsExpr: true,
    rightAssociative: false,
    isLoop: false,
    isAssign: false,
    prefix: false,
    postfix: false,
    binop: null,
    updateContext: null
  },
  ...
}

和 AST 节点一样它们也有start，end，loc属性。.

  • 经过语法分析后生成的  AST（大家也可以借助 jointjs 网站分析一下）：
{

  "type": "Program",

  "start": 0,

  "end": 5,
  "body": [

    {

      "type": "ExpressionStatement",
      "start": 0,

      "end": 5,
      "expression": {
        "type": "BinaryExpression",
        "start": 0,
        "end": 5,
        "left": {
          "type": "Identifier",
          "start": 0,
          "end": 1,
          "name": "n"
        },
        "operator": "*",
        "right": {
          "type": "Identifier",
          "start": 4,
          "end": 5,
          "name": "n"
        }
      }
    }
  ],
  "sourceType": "module"
}

2.2 Transform

Transform 会遍历 2.1 中生成的 AST，在此过程中会对 AST 结构进行添加、移除、更新等操作，当然这些操作依赖开发者提供的插件。Babel 对每一个 AST 节点都提供了「进入节点enter」 与 「退出节点exit」 两个时机，第三方开发者可以利用这两个时机对旧 AST 做操作。值得一提的是，Transform 步骤是 Babel 最复杂的部分，也是第三方插件能大显身手的地方。

以 Taro 解析 React 代码生成小程序代码为例：

  • 按照规范将 React 解析成 AST
  • 调用第三方插件对 AST 进行更新、删除、添加使之变成符合对应平台的 AST
  • 根据新的 AST 生成代码，此时的代码就是符合对应平台语法的代码

Transform 过程采用的是典型的 访问者模式 不熟悉的同学可以了解一下。

2.3 Generator

Generator 可以看成 Parser 的逆向操作，根据新的 AST 生成代码，其实就是生成字符串，这些字符串本身没有意义，是编译器赋予了字符串意义才变成我们所说的「代码」。Babel 会深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串。

3. 写一个简易版本的 Babel

这一小结我们将写一个简易版本的 Babel，将上面的知识点串联起来。这个简易的 Babel将完成  ES6 语法 -> ES5 语法的转化。以 const add = (a, b) => a + b 为例，转化完成后应该变成 function add(a,b) {return a + b}。

  • 定义待转化的代码字符串
/**


 * 待转化的代码
 */
const codeString = 'const add = (a, b) => a + b';
  • 词法分析
/**
 * Parser 过程-词法分析
 * @param codeString 待转化的字符串
 * @returns Tokens 令牌流
 */


function tokens(codeString) {
    let tokens = []; //存放 token 的数组

    let current = 0; //当前的索引
    while (current < codeString.length) {
        let char = codeString[current];


        //先处理括号
        if (char === '(' || char === ')') {
            tokens.push({
                type: 'parens',
                value: char
            });
            current++;
            continue;
        }


        //处理空格，空格可能是多个连续的，所以需要将这些连续的空格一起放到token数组中
        const WHITESPACE = /\s/;
        if (WHITESPACE.test(char)) {
            let value = '';
            while (current < codeString.length && WHITESPACE.test(char)) {
                value = value + char;
                current++;
                char = codeString[current];
            }
            tokens.push({
                type: 'whitespace',
                value: value
            });
            continue;
        }

        //处理连续数字,数字也可能是连续的，原理同上
        let NUMBERS = /[0-9]/;
        if (NUMBERS.test(char)) {
            let value = '';
            while (current < codeString.length && NUMBERS.test(char)) {
                value = value + char;
                current++;
                char = codeString[current];
            }
            tokens.push({
                type: 'number',
                value: value
            });
            continue;
        }


        //处理标识符，标识符一般以字母、_、$开头的连续字符
        const LETTERS = /[a-zA-Z\$\_]/;
        if (LETTERS.test(char)) {
            let value = '';
            //标识符
            while (current < codeString.length && /[a-zA-Z0-9\$\_]/.test(char)) {
                value = value + char;
                current++;
                char = codeString[current];
            }
            tokens.push({
                type: 'identifier',
                value: value
            });
            continue;
        }

        //处理 , 分隔符
        const COMMA = /,/;
        if (COMMA.test(char)) {
            tokens.push({
                type: ',',
                value: ','
            });
            current++;
            continue;
        }

        //处理运算符
        const OPERATOR = /=|\+|>/;
        if (OPERATOR.test(char)) {
            let value = '';
            while (OPERATOR.test(char)) {
                value += char;
                current++;
                char = codeString[current];
            }
            //如果存在 => 则说明遇到了箭头函数
            if (value === '=>') {
                tokens.push({
                    type: 'ArrowFunctionExpression',
                    value,
                });
                continue;
            }

            tokens.push({
                type: 'operator',
                value
            });
            continue;
        }

        throw new TypeError(`还未加入此字符处理 ${char}`);
    }
    return tokens;
}
  • 语法分析
/**


 * Parser 过程-语法分析
 * @param tokens 令牌流
 * @returns AST
 */


const parser = tokens => {
    // 声明一个全时指针，它会一直存在
    let current = -1;


    // 声明一个暂存栈,用于存放临时指针
    const tem = [];


    // 指针指向的当前token
    let token = tokens[current];

    const parseDeclarations = () => {



        // 暂存当前指针
        setTem();

        // 指针后移
        next();

        // 如果字符为'const'可见是一个声明
        if (token.type === 'identifier' && token.value === 'const') {
            const declarations = {
                type: 'VariableDeclaration',
                kind: token.value
            };

            next();

            // const 后面要跟变量的,如果不是则报错
            if (token.type !== 'identifier') {
                throw new Error('Expected Variable after const');
            }


            // 我们获取到了变量名称
            declarations.identifierName = token.value;


            next();

            // 如果跟着 '=' 那么后面应该是个表达式或者常量之类的,这里咱们只支持解析函数
            if (token.type === 'operator' && token.value === '=') {
                declarations.init = parseFunctionExpression();
            }

            return declarations;
        }
    };

    const parseFunctionExpression = () => {
        next();


        let init;
        // 如果 '=' 后面跟着括号或者字符那基本判断是一个表达式
        if (
            (token.type === 'parens' && token.value === '(') ||
            token.type === 'identifier'
        ) {
            setTem();
            next();
            while (token.type === 'identifier' || token.type === ',') {
                next();
            }

            // 如果括号后跟着箭头,那么判断是箭头函数表达式
            if (token.type === 'parens' && token.value === ')') {
                next();
                if (token.type === 'ArrowFunctionExpression') {
                    init = {
                        type: 'ArrowFunctionExpression',
                        params: [],
                        body: {}
                    };

                    backTem();

                    // 解析箭头函数的参数
                    init.params = parseParams();

                    // 解析箭头函数的函数主体
                    init.body = parseExpression();
                } else {
                    backTem();
                }
            }
        }

        return init;
    };

    const parseParams = () => {
        const params = [];
        if (token.type === 'parens' && token.value === '(') {
            next();
            while (token.type !== 'parens' && token.value !== ')') {
                if (token.type === 'identifier') {
                    params.push({
                        type: token.type,
                        identifierName: token.value
                    });
                }
                next();
            }
        }


        return params;
    };

    const parseExpression = () => {
        next();
        let body;
        while (token.type === 'ArrowFunctionExpression') {
            next();
        }

        // 如果以(开头或者变量开头说明不是 BlockStatement,我们以二元表达式来解析
        if (token.type === 'identifier') {
            body = {
                type: 'BinaryExpression',
                left: {
                    type: 'identifier',
                    identifierName: token.value
                },
                operator: '',
                right: {
                    type: '',
                    identifierName: ''
                }
            };
            next();

            if (token.type === 'operator') {
                body.operator = token.value;
            }

            next();

            if (token.type === 'identifier') {
                body.right = {
                    type: 'identifier',
                    identifierName: token.value
                };
            }
        }

        return body;
    };

    // 指针后移的函数
    const next = () => {
        do {
            ++current;
            token = tokens[current]
                ? tokens[current]
                : {type: 'eof', value: ''};
        } while (token.type === 'whitespace');
    };

    // 指针暂存的函数
    const setTem = () => {
        tem.push(current);
    };

    // 指针回退的函数
    const backTem = () => {
        current = tem.pop();
        token = tokens[current];
    };

    const ast = {
        type: 'Program',
        body: []
    };

    while (current < tokens.length) {
        const statement = parseDeclarations();
        if (!statement) {
            break;
        }
        ast.body.push(statement);
    }
    return ast;
};
  • Transform 过程
const traverser = (ast, visitor) => {

    // 如果节点是数组那么遍历数组
    const traverseArray = (array, parent) => {
        array.forEach((child) => {
            traverseNode(child, parent);
        });
    };


    // 遍历 ast 节点
    const traverseNode = (node, parent) => {
        const methods = visitor[node.type];


        if (methods && methods.enter) {
            methods.enter(node, parent);
        }



        switch (node.type) {
            case 'Program':
                traverseArray(node.body, node);
                break;


            case 'VariableDeclaration':
                traverseArray(node.init.params, node.init);
                break;

            case 'identifier':
                break;


            default:
                throw new TypeError(node.type);
        }


        if (methods && methods.exit) {
            methods.exit(node, parent);
        }
    };
    traverseNode(ast, null);
};


/**
 * Transform 过程
 * @param ast 待转化的AST
 * 此函数会调用traverser，传入自定义的visitor完成AST转化
 */
const transformer = (ast) => {
    // 新 ast
    const newAst = {
        type: 'Program',
        body: []
    };

    // 此处在ast上新增一个 _context 属性，与 newAst.body 指向同一个内存地址，traverser函数操作的ast_context都会赋值给newAst.body
    ast._context = newAst.body;

    traverser(ast, {
        VariableDeclaration: {
            enter(node, parent) {
                let functionDeclaration = {
                    params: []
                };
                if (node.init.type === 'ArrowFunctionExpression') {
                    functionDeclaration.type = 'FunctionDeclaration';
                    functionDeclaration.identifierName = node.identifierName;
                    functionDeclaration.params = node.init.params;
                }
                if (node.init.body.type === 'BinaryExpression') {
                    functionDeclaration.body = {
                        type: 'BlockStatement',
                        body: [{
                            type: 'ReturnStatement',
                            argument: node.init.body
                        }],
                    };
                }
                parent._context.push(functionDeclaration);
            }
        },
    });

    return newAst;
};
  • Generator过程
/**


 * Generator 过程
 * @param node 新的ast
 * @returns 新的代码
 */


const generator = (node) => {
    switch (node.type) {
        // 如果是 `Program` 结点，那么我们会遍历它的 `body` 属性中的每一个结点，并且递归地
        // 对这些结点再次调用 codeGenerator，再把结果打印进入新的一行中。
        case 'Program':
            return node.body.map(generator)
                .join('\n');


        // 如果是FunctionDeclaration我们分别遍历调用其参数数组以及调用其 body 的属性
        case 'FunctionDeclaration':
            return 'function' + ' ' + node.identifierName + '(' + node.params.map(generator) + ')' + ' ' + generator(node.body);



        // 对于 `Identifiers` 我们只是返回 `node` 的 identifierName
        case 'identifier':
            return node.identifierName;

        // 如果是BlockStatement我们遍历调用其body数组
        case 'BlockStatement':
            return '{' + node.body.map(generator) + '}';

        // 如果是ReturnStatement我们调用其 argument 的属性
        case 'ReturnStatement':
            return 'return' + ' ' + generator(node.argument);


        // 如果是ReturnStatement我们调用其左右节点并拼接
        case 'BinaryExpression':
            return generator(node.left) + ' ' + node.operator + ' ' + generator(node.right);


        // 没有符合的则报错
        default:
            throw new TypeError(node.type);


    }
};
  • 整个流程串联起来，完成调用链
let token = tokens(codeString);
let ast = parser(token);
let newAST = transformer(ast);
let newCode = generator(newAST);

console.log(newCode);

参考的文章

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# Babel
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MY6OjVJQ' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
babel插件实战：console.log()在周四的时候，加入"疯狂星期四，v我50?"-五八三
babel插件实战：console.log()在周四的时候，加入"疯狂星期四，v我50?"
babel插件实战：console.log()在周四的时候，加入"疯狂星期四，v我50?"
2年前 22
让我们把JS再向下拆解一层-五八三
让我们把JS再向下拆解一层
让我们把JS再向下拆解一层
2年前 17
webpack进阶知识之babel-polyfill和babel-runtime的区别-五八三
webpack进阶知识之babel-polyfill和babel-runtime的区别
webpack进阶知识之babel-polyfill和babel-runtime的区别
2年前 15
babel插件入门-五八三
babel插件入门
babel插件入门
2年前 13
?真的绝了，通过注释埋点好简单！！-五八三
?真的绝了，通过注释埋点好简单！！
?真的绝了，通过注释埋点好简单！！
2年前 13
Babel解析-五八三
Babel解析
Babel解析
2年前 10
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐