从一个webpack loader中学习

chalk:给终端输出加一些自定义的样式
loader-utils:webpack的loader配置中会通过options传入一些用户自定义参数,就可以通过该包提供的getoptions()获取

在这里插入图片描述

node-fetch:Node.js的模块,用于从远程服务器获取数据
关于babel,它是JS的编译器,主要用于将js转译为浏览器可以执行的代码,兼容各种浏览器等,最常见的就是将ES6转译为ES5(浏览器只能识别并执行es5的代码)

借鉴文章
Babel 编译代码的过程可分为三个阶段:解析(parsing)(@babel/parser)、转换(transforming)(@babel/parser)、生成(generating)(@babel/parser)

  1. @babel/traverse:用来自动遍历抽象语法树(AST)的工具
traverse(ast, {// 对语法树中特定的节点进行操作VariableDeclarator(path: NodePath) {// 指向当前 AST 节点const node = path.node;const { id, init } = node;if (id.name === '$$$' && datas && typeof datas === 'object') {const { properties } = init;const newProps = genObjectProperties(datas);init.properties = properties.concat(newProps);}}} as Visitor);
  1. @babel/parser:将源代码解析成AST
  2. @babel/generator:将AST 解码成js代码
函数返回值类型为t.ObjectProperty,什么意思?
function genObjectProperties(svgIcons: ISvgIcons): t.ObjectProperty[] {return Object.keys(svgIcons || {}).map((item) => {return t.objectProperty(t.stringLiteral(item), // 创建一个字符串字面量节点genIconProperties(svgIcons[item]));});
}

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

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

相关文章

口袋参谋:如何一键获取竞品数据?这招实用!

​在淘宝天猫上开店,市场竞争日益激烈,想要做好店铺,我们就不得不去分析竞品的数据了。 很多卖家开店后,一上来就直接卡在类目前10,折腾了一两个月才发现自己对标错了对象,最终竹篮打水一场空。 所以&…

uni-app:实现时钟自走(动态时钟效果)

效果 核心代码 使用钩子函数 mounted(),设置定时器,是指每秒都要去执行时间的获取,以至于实现时间自走的效果 mounted() { this.updateTime(); // 初始化时间 setInterval(this.updateTime, 1000); // 每秒更新时间 }, 自定义方法…

Ubuntu22.04系统 Cgroup v2 切换成v1

使用v1导致docker容器启动失败 Failed to mount cgroup at /sys/fs/cgroup/systemd: Operation not permitted Issue #4072 lxc/lxc GitHub https://github.com/lxc/lxc/issues/4072 原因:ubuntu自21.04版本后的版本(不包含21.04)linux内…

QT判断平台和生成版本设置输入目录

QT判断平台和生成版本设置输入目录 pro工程文件中常用的宏定义Chapter1 QT判断平台和生成版本设置输入目录Chapter2 Qt pro文件中判断 x86/arm(aarch64)交叉编译环境,区分 linux/windows系统, debug/release版本Chapter3 Qt的版本判断、跨平台选择与pro工程文件输出…

2015款MacBook Pro从Big Sur升级到Monterey

机器信息 存储是1TB的固态硬盘。 升级后的使用体验 开机速度 比之前Big Sur系统开机时间快了至少三分之一(进入系统的进度条停顿时间很短,未升级之前,进度条加载缓慢,动不动就停顿半天) 应用app使用情况 从Big Su…

CANoe-使用IG Ethernet Packet Builder实现IP包分片的若干问题

在文章《CANoe-Ethernet IG和Ethernet Packet Builder的使用和区别》中,我们讲过Packet Builder可以组装多种类型的以太网报文: 当我们想组装一条icmpv4 echo request报文,payload只有1个字节的数据FF时,选择ICMPv4 Packet,创建一条ICMPv4报文,把payload改为1个字节: 然…

【Javascript】数组练习(在排好序的数组⾥,按照⼤⼩顺序插⼊数据)

var array[1,4,5,7,9,17]; console.log(array);比如要插入一个数16 var array[1,4,5,7,9,17];var num16; var indexnull; var i; for(i0;i<array.length;i){if(array[i]<num){indexi;} } console.log(index);首先通过循环找出最后一个比自定义的num小的值&#xff0c;并…

Maven3.9.2 bug IDEA指定配置文件不生效

Maven3.9.2 bug IDEA指定配置文件不生效 描述 运行新项目需要配置指定的settings.xml文件&#xff0c;一直报错找不到依赖&#xff0c;查看maven日志是从maven中心仓库找的依赖&#xff0c;自然找不到。 解决过程 清理idea缓存&#xff0c;仍然报错 删除/${username}/.m2/…

仿写知乎日报第一周

效果图 主要的逻辑 Manager封装网络请求 首先&#xff0c;对于获取网络请求&#xff0c;我是将这些方法封装成了一个类Manager&#xff0c;后续在获取以往的内容时又封装了一个beforeManager类用于网络请求。这里不多赘述&#xff0c;Manager封装网络请求的知识参考我的以往博…

kaggle新赛:UBC卵巢癌亚型分类和异常检测大赛【图像分类】

赛题名称&#xff1a;UBC Ovarian Cancer Subtype Classification and Outlier Detection (UBC-OCEAN) 赛题链接&#xff1a;https://www.kaggle.com/competitions/UBC-OCEAN 赛题背景 卵巢癌是女性生殖系统最致命的癌症。目前&#xff0c;卵巢癌诊断依赖病理学家评估亚型。…

为1024征文活动用心用意而写的文稿

现在我在听的歌&#xff0c;名叫《Loser》。相信你可能听过&#xff0c;Bigbang的。里面有句歌词是这样的&#xff1a;把手伸了出来&#xff0c;却没有任何人握住我的手。不管生活怎样&#xff0c;希望看到这篇文章的你&#xff0c;可以带着自己和带着自己的倔强&#xff0c;一…

B-tree(PostgreSQL 14 Internals翻译版)

概览 B树(作为B树访问方法实现)是一种数据结构&#xff0c;它使您能够通过从树的根向下查找树的叶节点中所需的元素。为了明确地标识搜索路径&#xff0c;必须对所有树元素进行排序。B树是为有序数据类型设计的&#xff0c;这些数据类型的值可以进行比较和排序。 下面的机场代…

二叉树题目:最大二叉树

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;最大二叉树 出处&#xff1a;654. 最大二叉树 难度 5 级 题目描述 要求 给定一个没有重复元素的整数数组 num…

Ubuntu OpenLDAP配置笔记

Ubuntu OpenLDAP配置笔记 问题&#xff08;需求&#xff09;LDAP服务端安装slapd和ldap-utils配置域名编辑hosts修改主机名验证增加一个域账号修改用户的密码 Linux桌面加域安装软件验证允许远程账号首次登录时自动创建HOME目录桌面登录 其它问题Ubuntu更新和安装太慢LDAP服务端…

推荐一款支持异步批量下载图片的chrome插件——图片助手(ImageAssistant) 批量图片下载器

https://chrome.google.com/webstore/detail/imageassistant-batch-imag/dbjbempljhcmhlfpfacalomonjpalpko/related?hlzh-CNhttps://chrome.google.com/webstore/detail/imageassistant-batch-imag/dbjbempljhcmhlfpfacalomonjpalpko/related?hlzh-CN 安装后直接点击 会根据…

分治法,动态规划法,贪心法,回溯法主要概括

目录 分治法&#xff0c;动态规划法&#xff0c;贪心法&#xff0c;回溯法主要概括 1.前言2.分治法2.1基本思想&#xff1a;2.2适用条件&#xff1a;2.3时间复杂度&#xff1a;2.4主要解决&#xff1a;2.5关键字&#xff1a;2.6其他&#xff1a; 3.动态规划法3.1基本思想&…

强化学习问题(7)--- Python和Pytorch,Tensorflow的版本对应

1.问题 之前下载的python3.8&#xff0c;在对应Pytorch和Tensorflow时没太在意版本&#xff0c;在运行一些代码时&#xff0c;提示Pytorch和Tensorflow版本过高&#xff0c;直接降下来&#xff0c;有时候又和Python3.8不兼容&#xff0c;所以又在虚拟环境搞一个Pyhon3.7&#x…

JAVA毕业设计101—基于Java+Springboot的电影购票微信小程序带后台管理(源码+数据库)

基于JavaSpringboot的电影购票微信小程序带后台管理(源码数据库)101 一、系统介绍 本系统是小程序前台&#xff0c;带后台管理 本系统分为管理员、用户两种角色 管理员功能&#xff1a; 登录、统计分析、密码修改、用户管理、广告管理、影院管理、分类管理、电影管理、场次…

babel6使用ES2020最新js语法

babel6使用ES2020最新js语法 Babel 6 原本是不支持 ES2020 语法&#xff0c;因为它是在 Babel 7 中引入的。如果您想使用 ES2020 语法&#xff0c;您需要将 Babel 6 升级到 Babel 7 或更高版本(推荐),当然也可以在bebel6中安装支持某个语法的plugin,比如你想使用 ES2020 中的可…