babel执行流程

news2024/11/26 4:50:17

babel简单执行流程

为了验证方便 这边 使用的命令是 babel src/index.js --out-file lib/index.compiled.js,这样可以定位 babel 中的files.js 相对目录比较简单

执行scripts 中的 build 命令

执行 package.json 中的scripts 命令

 <!-- package.json 中的命令 -->
 "scripts": {
    "build":"babel src/index.js --out-file index.compiled.js"
  }

  <!-- 或者终端执行 -->
  npx babel src/index.js --out-file index.compiled.js

执行流程:
babel执行流程

  • normalizeFile:主要是通过 @babel/parser解析 源数据 code,通过词法分析、语法分析生成 ast
  • transformFile:主要是通过 @babel/traverse 以及插件的 visitors 深度遍历ast 并 转化相应代码
  • generateCode:主要是通过 @babel/generator 传入遍历后的ast,生成新的ast 以及 sourceMap

以下是简单代码转化演示 const -> var

const { parse } = require("@babel/parser");
const  traverse = require("@babel/traverse");
const generator = require("@babel/generator")

const code ="const a = 'this is a const mark'"
// 词法分析、 语法分析 并返回ast
const parseAst = parse(code,{tokens:true})
console.log("parseAst:",parseAst)

// Babel Traverse(遍历)模块维护了整棵树的状态,并且负责替换、移除和添加节点。
// 官网连接 https://babeljs.io/docs/babel-traverse
traverse.default(parseAst,{VariableDeclaration:{
  enter(path){
    path.node.kind='var'
  }
}})


// @babel/generator 生成ast 
const { code:generatorCode } = generator.default(parseAst)

console.log("generatorCode:",generatorCode)

// 打印结果是
var a = 'this is a const mark'

  • 详情可以查看:babel手册

  • babel查找并加载preset和plugin

以下是使用插件 转化箭头函数的代码演示

const babel = require("@babel/core");
const { code } = babel.transformSync("let number = x => x", {
  plugins: [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-function-name",
    "@babel/plugin-transform-block-scoping"
  ],
});

// 结果
var number = function number(x) {
  return x;
}

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

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

相关文章

【C语言】stdbool.h——有关bool的总结

在编程和日常生活中&#xff0c;经常需要一种只能具有两个值之一的数据类型&#xff0c;如是否、开关、真假等&#xff0c;因此&#xff0c;C 有一种bool数据类型&#xff0c;称为booleans。布尔值表示 或true的值false。 C 中的 bool 是大多数语言中的基本数据类型&#xff0…

SwiftUI 打造一款可收缩的 HStack(二):对齐+ZStack

概览 在上篇 SwiftUI 打造一款可收缩的 HStack(一):“原汤化原食” 博文里,我们讨论了如何用 HStack 自身来实现可收缩的“HStack”。 而在本篇中,我们将尝试利用 SwiftUI 对齐 + ZStack 的方式完成相同的功能。 在本篇博文中,您将学到以下内容: 概览1. SwiftUI 中的对…

开源游戏引擎:创造无限可能 | 开源专题 No.56

godotengine/godot Stars: 62.6k License: MIT Godot Engine 是一个功能强大的跨平台游戏引擎&#xff0c;可用于创建 2D 和 3D 游戏。它提供了一套全面的常见工具&#xff0c;让用户可以专注于制作游戏而不必重复造轮子。该引擎支持将游戏一键导出到多个平台上&#xff0c;包…

期货跟单系统。镜像跟单系统有什么作用?功能有哪些?

期货跟单系统&#xff1a; 期货自动跟单系统&#xff0c;是一款专门用来针对特定账户的操作而进行自动跟单的软件。软件兼容目前所有的期货公司账户&#xff0c;具有稳定性&#xff0c;速度性和可靠性的优势。 补差补点&#xff0c;根据盘手实盘心理分析&#xff0c;增加模拟…

C#编程-描述内存分配

描述内存分配 分配给变量的内存通过两种方式引用&#xff1a;值类型和引用类型。内置数据类型&#xff0c;诸如int、char和float都是值雷兴国。当您声明int变量时&#xff0c;编译器会分配一个内存块以保持该整数值。请思考以下语句&#xff1a; int Num 50;上述语句为保存值…

深入理解可变参数

目录 1.C语言方式 1.1.宏介绍 1.2.原理详解 1.3.案例分析 1.4.其他实例 2.C之std::initializer_list 2.1.简介 2.2.原理详解 2.3.案例分析 3.C之可变参数模版 3.1.简介 3.2.可变参数个数 3.3.递归包展开 3.4.逗号表达式展开 3.5.Lambda 捕获 3.6.转发参数包 4…

YOLOv5算法进阶改进(13)— 更换上采样方式之CARAFE | 轻量级通用上采样算子

前言:Hello大家好,我是小哥谈。CARAFE算子是一种上采样运算符,全称为Content-Aware ReAssembly Feature Extraction,它在图像语义分割任务中被广泛应用。CARAFE算子通过学习像素之间的关系来进行上采样,从而提高了图像分割的精度。CARAFE算子的优势在于它能够根据图像的内…

Hotspot源码解析-第十二章-线程栈保护页

了解保护页&#xff0c;先从几个问题开始吧 1、为什么线程栈有栈帧了&#xff0c;还要有保护页&#xff1f; 答&#xff1a;在操作系统中内存可以看成是一个大数组&#xff0c;这就有一个问题&#xff0c;线程之间可能会互相踩了别人的内存空间&#xff0c;所以栈空间也存在这…

鸿鹄电子招投标系统:源码级别解析电子招投标的精髓

招投标管理系统是一个集门户管理、立项管理、采购项目管理、采购公告管理、考核管理、报表管理、评审管理、企业管理、采购管理和系统管理于一体的综合性应用平台。它适用于招标代理、政府采购、企业采购和工程交易等业务的企业&#xff0c;旨在提高项目管理的效率和质量。该系…

MySQL备份总结

物理备份 通常物理备份是保障数据库备份最有效的方法&#xff0c;优于逻辑备份&#xff0c;且其对数据库本身性能的损耗相较于逻辑备份较低。MySQL的物理备份通常我们使用Percona公司出品的基于 MySQL 的服务器的开源热备份实用程序。其使用方法如下&#xff1a; #下载 MySQL…

python毕设选题 - flink大数据淘宝用户行为数据实时分析与可视化

文章目录 0 前言1、环境准备1.1 flink 下载相关 jar 包1.2 生成 kafka 数据1.3 开发前的三个小 tip 2、flink-sql 客户端编写运行 sql2.1 创建 kafka 数据源表2.2 指标统计&#xff1a;每小时成交量2.2.1 创建 es 结果表&#xff0c; 存放每小时的成交量2.2.2 执行 sql &#x…

IOC解决程序耦合

1.什么是IOC IOC (Inverse of Control)即控制反转&#xff1a;由ioc容器来创建依赖对象&#xff0c;程序只需要从IOC容器获取创建好的对象。 我们在获取对象时&#xff0c;都是采用new的方式。是主动的。 我们获取对象时&#xff0c;同时跟工厂要&#xff0c;有工厂为我们查找…

大数据Doris(五十):数据导出的其他导出案例参考

文章目录 数据导出的其他导出案例参考 一、​​​​​

乘号在键盘上怎么打?速来学习这4个方法!

“我在用电脑编辑文档时&#xff0c;需要输入一些数学公式&#xff0c;现在我不知道乘号怎么打&#xff0c;有朋友可以教教我吗&#xff1f;” 乘号是数学中常用的符号&#xff0c;用于表示两个数的相乘关系。很多用户在使用电脑办公时可能需要输入乘号。但是却发现键盘上没有明…

sql如何获取字段是数组中的数字【搬代码】

我们可以看到表中字段是一个数组怎么获取其中的数据呢&#xff1f; SELECT sim->>$[0] FROM fin_xxx如果使用左外链接&#xff0c;如下&#xff0c;其他连接时一样的 SELECT a.* FROM fin_aaaa a LEFT JOIN fin_xxx b ON b.sim_r->>$[0]a.corr WHERE b.tid20210 …

【React系列】Redux(一)管理状态

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 在React的开发过程中&#xff0c;Redux对于我们是非常重要的。 但是对于很多人来说&#xff0c;初次接触redux会感觉r…

Leetcode_day01_88合并两个有序数组

Leetcode_day01_88合并两个有序数组 题目描述&#xff1a; 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺…

锂电池寿命预测 | Matlab基于LSTM长短期记忆神经网络的锂电池寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 锂电池寿命预测 | Matlab基于LSTM长短期记忆神经网络的锂电池寿命预测 程序设计 完整程序和数据获取方式&#xff1a;私信博主回复Matlab基于LSTM长短期记忆神经网络的锂电池寿命预测。 参考资料 [1] http://t.csdn…

【已解决】若依系统前端打包后,部署在nginx上,点击菜单错误:@/views/system/role/index

​ 上面错误&#xff0c;是因为/views/system/role/index动态路由按需加载时候&#xff0c;错误导致。 解决办法&#xff1a; 如果您的前端项目访问时候&#xff0c;需要带有项目名称的话&#xff0c;参考凯哥上一篇文章&#xff1a;【已解决】若依前后端分离版本&#xff0…

《MySQL系列-InnoDB引擎05》MySQL索引与算法

文章目录 第五章 索引与算法1 InnoDB存储引擎索引概述2 数据结构与算法2.1 二分查找法2.2 二分查找树和平衡二叉树 3 B树3.1 B树的插入操作3.2 B树的删除操作 4 B树索引4.1 聚集索引4.2 辅助索引4.3 B树索引的分裂 5 Cardinality值5.1 什么是Cardinality5.2 InnoDB存储引擎的Ca…