bable和AST概述

news2024/11/13 13:02:18

这里写目录标题

    • bable
      • 定义
      • Babel概述
      • Babel 中重要的对象Vistor
    • AST
      • 定义
      • Javascript 语法的AST(抽象语法树)

bable

定义

  • Babel 是我们知道的将 ES6、ES7等代码转译为 ES5 代码且能安全稳定运行最好的工具
  • 同时它允许开发者开发插件,能够在编译时期转换 JavaScript 的结构。

Babel概述

  • 我们需要知道 3 个 Babel 处理流程中的重要工具;

    • 解析

      • Babylon是一个解析器,它可以将javascript字符串,转化为更加友好的表现形式,称之为抽象语法树;

      • 在解析过程中有两个阶段:词法分析和语法分析

        • 词法分析阶段:字符串形式的代码转换为令牌(tokens)流,令牌类似于AST中的节点;
        • 语法分析阶段:把一个令牌流转化为AST的形式,同时这个阶段会把令牌中的信息转化为AST的表述结构
    • 转换

      • babel-traverse

        模块允许你浏览、分析和修改抽象语法树(AST Abstract Syntax Tree)

        • Babel接收解析得到的AST并通过babel-traverse对其进行深度优先遍历,在此过程中对节点进行添加、更新及移除操作。
    • 生成

      • babel-generator

        模块用来将转换后的抽象语法树(AST Abstract Syntax Tree)转化为Javascript 字符串

        • 将经过转换的AST通过babel-generator再转换为js代码,过程及时深度遍历整个AST,然后构建转换后的代码字符串。

Babel 中重要的对象Vistor

babel 在处理一个节点时,是以访问者的形式获取节点的信息,并进行相关的操作,这种操作是通过visitor对象实现的。

在 visitor 中定义了处理不同节点的函数。

visitor: {
  Program: {
    enter(path, state) {
      console.log('start processing this module...');
    },
      exit(path, state) {
        console.log('end processing this module!');
      }
  },
    ImportDeclaration:{
      enter(path, state) {
        console.log('start processing ImportDeclaration...');
        // do something
      },
        exit(path, state) {
          console.log('end processing ImportDeclaration!');
          // do something
        }
    }
}

AST

定义

  • AST (Abstract Syntax Tree)是抽象语法树英文的缩写,AST语法树每一层都拥有相同的结构,这样的每一层结构也被叫做节点(Node)。
  • AST 是源代码的抽象语法结构树状表现形式,Webpack、ESLint、JSX、TypeScript 的编译和模块化规则之间的转化都是通过 AST 来实现对代码的检查、分析以及编译等操作。
  • 一个 AST 可以由单一的节点或是成百上千个节点构成。 它们组合在一起可以描述用于静态分析的程序语法。

Javascript 语法的AST(抽象语法树)

  • javascript 语句要想知道抽象语法树之后的代码是什么,里面的字段都代表什么含义以及遍历的规则,可以通过javascript语法转换AST工具来实现javascript语法的在线转换;
    例如:
    在这里插入图片描述

  • esprima、estraverse 和 escodegen 模块是操作 AST 的三个重要模块,也是实现 babel 的核心依赖。

    例如:语法转换插件需要借助 babel-core 和 babel-types 两个模块,就是依赖 esprima、estraverse 和 escodegen

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/393437.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于 interface{} 会有啥注意事项?上

学习 golang ,对于 interface{} 接口类型,我们一定绕不过,咱们一起来看看 使用 interface{} 的时候,都有哪些注意事项吧 interface {} 可以用于模拟多态 xdm 咱们写一个简单的例子,就举动物的例子 写一个 Animal 的…

【LeetCode】剑指 Offer(17)

目录 题目:剑指 Offer 34. 二叉树中和为某一值的路径 - 力扣(Leetcode) 题目的接口: 解题思路: 代码: 过啦!!! 写在最后: 题目:剑指 Offer …

Spring Cache简单介绍和使用

目录 一、简介 二、使用默认ConcurrentMapManager (一)创建数据库和表 (二)创建boot项目 (三)使用Api 1、EnableCaching 2、CachePut 3、cacheable 4、CacheEvict 三、使用redis作为cache 一、简…

云计算基础——云计算认知

云计算的总体框架在服务方面,主要以提供用户基于云的各种服务为主,共包含3个层次:1.软件即服务(Software as a Service,简称SaaS),这层的作用是将应用主要以基于Web 的方式提供给客户;2.平台即服务(Platform as a Serv…

STL讲解——模拟实现vector

STL讲解——模拟实现vector vector深度剖析 在STL源码中,发现vector定义的并不是 start、size、capacity,而是start、finish、end_of_storage. 这样就可以得到size()和capacity()。 sizefinish-start capacityend_of_storage-start 扩容可能是本地扩容也…

Entity Framework简单使用

我喜欢比较老派的database first , 所以先创建sql server的数据库,比如dbname叫做:Blogging这里我省略了。 在visual studio里面创建一个控制台程序, 然后添加ado.net项目 选择“gen from database” 然后新建你的数据库连接&…

基于粒子群优化算法的分布式电源选址定容【IEEE33节点】(Matlab代码实现)

👨‍🎓个人主页:研学社的博客💥💥💞💞欢迎来到本博客❤️❤️💥💥🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密…

测试人员须要知道的性能测试那些事

随着各企业的业务发展、用户量以及数据量的不断增加,系统承载的压力也会随之增加,服务系统的性能好坏又严重影响企业的利益。因此,性能测试重要性与需求越来越强烈。 常见的性能测试目的 性能测试是确定系统在特定工作负载下的稳定性和响应…

数智引航 共赢未来 | 科士达2023数据中心合作伙伴大会圆满召开!

3月5日,科士达2023年全国合作伙伴大会在广东深圳隆重召开,本次大会以“数智引航 共赢未来”为主题,来自全国各地的核心渠道伙伴齐聚一堂,深度交流,展望未来,共同探讨数据中心技术发展趋势,碰撞…

[Python图像处理] 使用高通滤波器实现同态滤波

使用高通滤波器实现同态滤波同态滤波基础实现同态滤波相关链接同态滤波基础 同态滤波是一种去除图像中乘性噪声的技术,常用于校正图像中的不均匀照明。根据图像形成的光照反射模型,图像 f(x,y)f(x,y)f(x,y) 可以由以下两个分量表征: 入射到…

linux中改变了jdk版本,为什么其他用户无法使用?

linux中改变了jdk版本,为什么其他用户无法使用? 1、jdk建在/usr/local目录下 2、环境变量写在/etc/profile下 3、如果发现root用户下,java -version可以出现版本信息,其他用户下查询不到jdk版本信息 问题:root用户下&…

关于递归处理,应该怎么处理,思路是什么?

其实问题很简单,就是想要循环遍历整个data对象,来实现所有name转成label,但是想到里面还有children属性,整个children里面可能还会嵌套很多很多的name,如此循环,很难搞,知道使用递归&#xff0c…

Linux系统安装Hbase,通过Zookeeper管理

目录 一、安装包解压,重命名 二、修改环境配置 2.1、修改 Hbase配置 2.2、修改 zookeeper配置 2.3、修改/etc/profile 环境,添加Hbase和Zookeeper环境路径 三、启动Hbase 四、退出服务 一、安装包解压,重命名 安装包:链接…

数据分析:基于随机森林(RFC)对酒店预订分析预测

数据分析:基于随机森林(RFC)对酒店预订分析预测 作者:AOAIYI 作者简介:Python领域新星作者、多项比赛获奖者:AOAIYI首页 😊😊😊如果觉得文章不错或能帮助到你学习,可以点赞&#x1f…

微信小程序上拉、下拉刷新组封装件

在开发小程序的时候通常会遇到上拉或者下拉刷新的功能需求&#xff0c;然而这个功能很多页面也都会用到&#xff0c;因此这里&#xff0c;把这个功能封装为组件&#xff0c;方便复用 我很直接&#xff0c;不多说&#xff0c;上代码 首先index.wxml <scroll-view scroll-y…

LNMP架构的源码编译环境下部署 Discuz!社区论坛与Wordpress博客

目录 一.编译安装Nginx 1.关闭防火墙 2.安装依赖包 3.创建运行用户 4.解压软件包并编译安装 5.软链接路径优化 6.添加Nginx系统服务 二.编译安装MySQL服务 1.安装依赖环境 2.创建运行用户 3.解压软件包并编译安装 4.数据库目录进行权限调整 5.修改配置文件 6.设…

linux面试基础篇

题目目录1.简述DNS分离解析的工作原理&#xff0c;关键配置2.apache有几种工作模式&#xff0c;分别简述两种工作模式及其优缺点&#xff1f;3.写出172.0.0.38/27 的网络id与广播地址4.写出下列服务使用的传输层协议&#xff08;TCP/UDP&#xff09;及默认端口5.在局域网想获得…

Uni-app页面路由的几种写法

uni.navigateTo( OBJECT) 保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用 uni.navigateBack 可以返回到原来页面 ONJECT参数说明&#xff1a; 注意&#xff1a; 页面跳转路径有层级限制&#xff0c;不能无限跳转新页面跳转到 tabBar 页面只能使用 switchT…

NCRE计算机等级考试Python真题(十二)

第十二套试题1、以下关于程序设计语言的描述&#xff0c;错误的选项是&#xff1a;A.Python语言是一种脚本编程语言B.汇编语言是直接操作计算机硬件的编程语言C.程序设计语言经历了机器语言、汇编语言、脚本语言三个阶段D.编译和解释的区别是一次性翻译程序还是每次执行时都要翻…

LCD液晶段码屏显示驱动IC -VK2C23高抗干扰/抗噪,适用于瓦斯表/燃气表/煤气表

产品型号&#xff1a;VK2C23A/B产品品牌&#xff1a;永嘉微电/VINKA封装形式&#xff1a;LQFP64/48可定制&#xff1a;DICE(COB邦定片)&#xff1b;COG(邦定玻璃用)产品年份&#xff1a;新年份原厂 工程服务&#xff0c;技术支持&#xff01;VK2C23A/B概述&#xff1a;VK2C23A/…