babel原理

最新推荐文章于 2023-04-03 09:41:55 发布
最新推荐文章于 2023-04-03 09:41:55 发布
阅读量347 收藏 1
点赞数
分类专栏： 面试 文章标签： babel原理
原文链接：https://blog.csdn.net/qj6837/article/details/100174403
版权

什么是Babel？

Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。

Babel 大概分为三大部分:

  • 解析: 将代码(其实就是字符串)转换成 AST( 抽象语法树)
  • 转换: 访问 AST 的节点进行变换操作生成新的 AST
  • 生成: 以新的 AST 为基础生成代码

抽象语法树（AST）
举个例子：

// JS
const add = (a,b) => a+b;

// 上面代码生成的AST
{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration", // 变量声明
      "declarations": [ // 具体声明
        {
          "type": "VariableDeclarator", // 变量声明
          "id": {
            "type": "Identifier", // 标识符（最基础的）
            "name": "add" // 函数名
          },
          "init": {
            "type": "ArrowFunctionExpression", // 箭头函数
            "id": null,
            "expression": true,
            "generator": false,
            "params": [ // 参数
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": { // 函数体
              "type": "BinaryExpression", // 二项式
              "left": { // 二项式左边
                "type": "Identifier",
                "name": "a"
              },
              "operator": "+", // 二项式运算符
              "right": { // 二项式右边
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

在这里插入图片描述AST explorer

Babel工作流程

  1. Parse（解析）
    Parse阶段分为两个阶段：词法分析和语法分析
  • 词法分析：可以看成是对代码进行“分词”，它接收一段源代码，然后执行一段 tokenize 函数，把代码分割成被称为Tokens（令牌流）。
[
    { "type": "Keyword", "value": "const" },
    { "type": "Identifier", "value": "add" },
    { "type": "Punctuator", "value": "=" },
    { "type": "Punctuator", "value": "(" },
    { "type": "Identifier", "value": "a" },
    { "type": "Punctuator", "value": "," },
    { "type": "Identifier", "value": "b" },
    { "type": "Punctuator", "value": ")" },
    { "type": "Punctuator", "value": "=>" },
    { "type": "Identifier", "value": "a" },
    { "type": "Punctuator", "value": "+" },
    { "type": "Identifier", "value": "b" }
]

模拟实现

function tokenize(code) {
    if (!code || code.length === 0) {
        return [];
    }
    var current = 0; // 记录位置
    var tokens = []; // 定义一个空的 token 数组
    
    var LETTERS = /[a-zA-Z\$\_]/i;
    var KEYWORDS = /const/; //  模拟一下判断是不是关键字
    var WHITESPACE = /\s/;
    var PARENS = /\(|\)/;
    var NUMBERS = /[0-9]/;
    var OPERATORS = /[+*/-]/;
    var PUNCTUATORS = /[~!@#$%^&*()/\|,.<>?"';:_+-=\[\]{}]/;
    
    // 从第一个字符开始遍历
    while (current < code.length) {
        var char = code[current];
        // 判断空格
        if (WHITESPACE.test(char)) {
          current++;
          continue;
        }
        // 判断连续字符
        if (LETTERS.test(char)) {
            var value = '';
            var type = 'Identifier';
            while (char && LETTERS.test(char)) {
                value += char;
                char = code[++current];
            }
            // 判断是否是关键字
            if (KEYWORDS.test(value)) {
                type = 'Keyword'
            }
            tokens.push({
                type: type,
                value: value
            });
            continue;
        }
        // 判断小括号
        if (PARENS.test(char)) {
            tokens.push({
              type: 'Paren',
              value: char
            });
            current++;
            continue;
        }
        // 判断连续数字
        if (NUMBERS.test(char)) {
          var value = '';
          while (char && NUMBERS.test(char)) {
            value += char;
            char = code[++current];
          }
          tokens.push({
            type: 'Number',
            value: value
          });
          continue;
        }
        // 判断运算符
        if (OPERATORS.test(char)) {
            tokens.push({
                type: 'Operator',
                value: char
            });
            current++;
            continue;
        }
        // 判断箭头函数
        if (PUNCTUATORS.test(char)) {
            var value = char;
            var type = 'Punctuator';
            var temp = code[++current];
            if (temp === '>') {
                type = 'ArrowFunction';
                value += temp;
                current ++;
            }
            tokens.push({
                type: type,
                value: value
            });
            continue;
        }
        tokens.push({
            type: 'Identifier',
            value: char
        });
        current++;
    }
    return tokens;
}
  • 语法分析：会把一个令牌流转换成 AST 的形式。 这个阶段会使用令牌中的信息把它们转换成一个 AST 的结构，这样更易于后续的操作。语法分析需要开发者根据token流提供的信息来分析出代码之间的逻辑关系,只有经过词法分析 token 流才能成为有结构的抽象语法树.依据的标准为estree标准

Babel 使用 @babel/parser 解析代码，输入的 js 代码字符串根据 ESTree 规范生成 AST（抽象语法树）。Babel 使用的解析器是 babylon。

  1. Transform（转换）
    转换的关键就是根据当前的抽象语法树,以我们定义的规则生成新的抽象语法树,转换的过程就是生成新抽象语法树的过程.
    Babel 对于 AST 的遍历是深度优先遍历，对于 AST 上的每一个分支 Babel 都会先向下遍历走到尽头，然后再向上遍历退出刚遍历过的节点，然后寻找下一个分支。
const traverser = (ast, visitor) => {

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

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

        if (method) {
            method(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);
        }
    };
    traverseNode(ast, null);
};

Babel 会维护一个称作 Visitor 的对象，这个对象定义了用于 AST 中获取具体节点的方法。
Babel提供了@babel/traverse(遍历)方法维护这AST树的整体状态，并且可完成对其的替换，删除或者增加节点，这个方法的参数为原始AST和自定义的转换规则，返回结果为转换后的AST。
3. Generate(生成）
根据我们转换后的抽象语法树来生成新的代码,我们会实现一个函数, 他接受一个对象( ast),通过递归生成最终的代码

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);

   }
};

总结：

  1. babylon 将 ES6/ES7 代码解析成 AST
  2. @babel/traverse 对 AST 进行遍历转译，得到新的 AST
  3. 新 AST 通过@babel/generator 转换成 ES5
前端碎碎念
关注
专栏目录
babel的原理
weixin_47450807的博客
04-22 5925
一、babel的原理 babel的转移过程分为三个阶段，这三个步骤分别是： 1、解析parse:将代码解析生成抽象语法树（AST）,即词法分析和语法分析的过程。 2、转换Transform:对于AST进行变换的一些列的操作，babel接收得到的AST并通过babel-traverse对其进行遍历，在此过程中进行添加，更新以及移除等操作。 3、生成Generate:将变换后的AST再转换为JS代码，使用到的模块是babel-generator。 二、如何编写一个babel插件 Babel的核心模块@babe
Babel原理
weixin_44739881的博客
02-13 553
前言 在学习es6的时候就一直希望了解一下bable的转码原理，偶然的机会查了查，整理了一下。 Bable的主要工作原理 Bable是一个转译器，与编译器不同。bable主要负责目标代码的版本转换，只处理同一种语言，并且只负责输出转码后的代码串。大概分三个阶段： parsing 生成AST抽象语法树（将整个代码字符串分割成语法单元 ，进行语义分析，在分词结果的基础之上分析语法单元之间的关系） ...
深入理解babel原理
weixin_47450807的博客
02-04 1966
在现在开发者基本使用ES6+语法，但是任然存在部分浏览器不能完全支持ES6+语法，此时我们需要利用babel来进行转化，将ES6+语法转化成ES5语法，来实现浏览器兼容的功能。 babel是实现代码的转化，而不是对代码进行打包。 下面将从babel原理方法对其进行解析。 一、babel运行的三个阶段 babel我们可以把他理解为一个编译器，也就是实现代码转换的功能，其转换过程分为三个阶段。 1、解析： 将js代码转换成AST（抽象语法树） 2、转化： 根据抽象语法树进行变换操作 3、生成： 将转换后的抽象语
babel 原理与演进
.
08-19 3701
什么是 babel 官网上的定义是 babel 是一个 JavaScript 编译器，具体来说，babel 是一个工具用于将 ECMAScript 2015+ 语法编写的代码转化成向后兼容的 JavaScript 语法，以便于能够运行在当前或者旧版本浏览器或其他环境中。 如图所示先来回顾下 v8 执行 js 代码的整体流程，有一段 js 代码经过词法分析将代码解析成几个 token，然后经过语法分析生成一棵 AST 数，再经过语义分析解析出作用域、领域等上下文环境。最终生成中间代码的形态(中间代码可能是..
babel 原理三：babel 的工作原理
waiting677的博客
01-10 1138
更新 babel7.x preset 的变更：淘汰 es201x、删除 stage-x、强推 env npm package 名称的变化：把所有 babel-* 重命名为 @babel/* 不再支持低版本 node：要求 nodejs>=6 only 和 ignore 匹配规则的变化 @babel/node 从 @babel/cli 中独立了 babel-upgrade babel 的工作原...
初探 babel 深入浅出地分析 babel 原理
Cansiny0320的博客
07-06 861
写代码的时候，我们经常会使用 babel 来进行 polyfill，但是 babel 是怎么做到的呢？这篇文章会对 babel 有一个大概的介绍 babel 是啥？ babel 的用途 js 转译器 转译 esnext、typescript、flow 等到目标环境支持的 js 这个是最常用的功能，用来把代码中的 esnext 的新的语法、typescript 和 flow 的语法转成基于目标环境支持的语法的实现，并且还可以把目标环境不支持的 api 进行 polyfill。 一些特定用途的代码转换 babe
Babel 的原理
HZFEStudio的博客
09-20 134
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题Babel 是什么Babel 有什么用压缩代码如何实现回答关键点JS 编译器 AST 插件系统Babel 是 JavaScript 编译器：他能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；Babel 内部原理是将
[实践系列]Babel原理
weixin_33850890的博客
01-14 110
前言 [实践系列] 主要是让我们通过实践去加深对一些原理的理解。 实践系列-前端路由 有兴趣的同学可以关注 实践系列 。 求star求follow~ Babel是什么？我们为什么要了解它? 1. 什么是babel ? Babel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本，简言之，...
Babel、AST 原理
yiyueqinghui的博客
11-30 671
1. 什么是babel Babel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本，简言之，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。 2、babel 是如何工作的 首先得要先了解一个概念：抽象语法树（Abstract Syntax Tree, AST），Babel 本质上就是在操作 AST 来完成代码的转译。 2.1、AST是什么 AST：即用一个树型结构的对象来描述js代码 分析 AST：https://ast
Babel的使用及其工作原理
cc_fys的博客
08-29 3300
Babel的包构成 核心包 babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。 babylon：js的词法解析器 babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用 ba...
快速了解babel工作原理
文摘资讯
08-03 774
介绍Babel 是一个通用的多功能的 JavaScript 编译器。此外它还拥有众多模块可用于不同形式的静态分析。静态分析是在不需要执行代码的前提下对代码进行分析的处理过...
【Babel】Babel的工作原理
webFrontEndDev的博客
12-03 390
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其它环境中。 // Babel 输入： ES2015 箭头函数 [1, 2, 3].map((n) => n + 1) // Babel 输出： ES5 语法实现的同等功能 [1, 2, 3].map(function(n)...
babel原理&动手实现babel插件
最新发布
frontend_frank的博客
04-03 1156
前言巴比伦塔 （希伯来语：מִגְדַּל בָּבֶל，**Migdal Bāḇēl）也译作巴贝尔塔、巴别塔，或意译为通天塔**），本是犹太教《塔纳赫·创世纪篇》中的一个故事，说的是人类产生不同语言的起源。在这个故事中，一群只说一种语言的人在“大洪水”之后从东方来到了示拿地区，并决定在这修建一座城市和一座“能够通天的”高塔；上帝见此情形就把他们的语言打乱，让他们再也不能明白对方的意思，并把他们分...
Babel原理是什么？
Meraln的博客
03-22 371
babel的转义过程也分为三个阶段，这三步具体是： 解析Parse：将代码解析生成抽象语法树(即AST)，即词法分析与语法分析的过程 转换Transform：对于AST进行变换一系列的操作，babel接收得到AST并通过babel-traverse对其进行遍历，在此过程中进行添加、更新及移除等操作 生成Generate：将变换后的AST再转换为JS代码，使用到的模块是babel-genertor ...
Liunx系统中安装JDK的一般步骤
qq_32403043的博客
10-24 292
Liunx下安装JDK的一般步骤 声明一下，liunx下安装JDK基本上分为两种，分别是基于yum的在线安装，这种方式必须要能上网，否则安装不成功。另外一种是手动安装，我们今天就总结手动安装。其实工作当中大多数还是会选择手动安装，我们可以指定JDK安装的目录等。好，正式开始…… 检查是否有JDK 1、输入：java -version 2、发现有输入：rpm -qa | grep java 检测jdk的安装包，（注意：rpm命令符没有时记得下载一个输入：apt-get install +命令名称） 3、接着进
webpack6与Babel深度解析：从原理到实战
首先，Babel是一个编译器，它的工作原理是读取源代码，分析其语法结构，然后按照预设的规则将其转换为目标版本的JavaScript。在上述例子中，Babel将箭头函数`n=>n2`转换为`function(n){return Math.pow(n,2);}`。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值