从一个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.hqwc.cn/news/145604.html

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

相关文章

【扩散模型】【文本到音频论文系列翻译二】使用指令微调LLM和潜在扩散模型的文本到音频生成

🔥 🔥🔥 github: https://github.com/declare-lab/tango 效果:https://tango-web.github.io/ 论文地址:https://arxiv.org/pdf/2304.13731.pdf 数据集audiocaps下载: https://blog.csdn.net/weixin_4350969…

朋友圈推广如何做?

为什么在朋友圈做推广是如此重要,以及如何充分利用这个平台来推动你的业务增长。 不仅仅是分享生活点滴,朋友圈也可以成为你的事业起飞的跳板。快来了解一下吧! 为什么在朋友圈做推广? 1、人脉力量:朋友圈是一个连接…

谷歌云的利润增长才刚刚开始

来源:猛兽财经 作者:猛兽财经 总结: (1)自从Google Cloud(谷歌云)今年开始盈利以来,投资者都在怀疑这种盈利能力能否持续下去。 (2)虽然微软Azure目前在全球的人工智能竞…

我试图扯掉这条 SQL 的底裤。只能扯一点点,不能扯多了

之前不是写分页嘛,分页肯定就要说到 limit 关键字嘛。 然后我啪的一下扔了一个链接出来: https://dev.mysql.com/doc/refman/8.0/en/limit-optimization.html 这个链接就是 MySQL 官方文档,这一章节叫做“对 Limit 查询的优化”,针对 limit 和 order by 组合的场景进行了较…

XPS测试基本理论-科学指南针

1、XPS是什么鬼? 通过收集在入射X光作用下,从材料表面激发的电子能量、角度、强度等信息对材料表面进行定性、定量和结构鉴定的表面分析方法。 一般以Al、Mg作为X射线的激发源,俗称靶材。 2、XPS测试深度是多少? 由于电子穿过材料需要消耗能量&…

算法刷题-链表

算法刷题-链表 203. 移除链表元素 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val val 的节点,并返回 新的头节点 。 示例 1: 输入:head [1,2,6,3,4,5,6], val 6 输出:[1,2,3,4,5]…

vue3如何实现页面跳转?

首先、给元素绑点击事件 其次 写跳转路由 总结:一定不要忘了引入Router

【JVM系列】- 探索·运行时数据区的私有结构

探索运行时数据区的私有结构 文章目录 探索运行时数据区的私有结构运行时数据区的结构与概念认识线程了解守护线程和普通线程JVM系统线程 程序计数器(PC寄存器)概述PC寄存器的特点PC寄存器的作用 透过案例了解寄存器为什么需要用PC寄存器来存放字节码的指…

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

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

@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)

目录 一、RequestMapping 路由映射 二、参数传递 1、传递单个参数 2、传递多个参数 3、传递对象 4、后端参数重命名 一、RequestMapping 路由映射 指定请求访问的路径既可以修饰类,又可以修饰方法 RequestMapping支持Get、Post、Delete等多种请求方式 Re…

Qt第六十五章:自定义菜单栏的隐藏、弹出

目录 一、效果图 二、qtDesigner 三、ui文件如下: 四、代码 一、效果图 二、qtDesigner 原理是利用属性动画来控制QFrame的minimumWidth属性。 ①先拖出相应的控件 ②布局一下 ③填上一些样式 相关QSS background-color: rgb(238, 242, 255); border:2px sol…

LNMP架构部署Discuz论坛系统

文章目录 LNMP架构&部署Discuz论坛系统部署LNMP架构环境前期准备安装Nginx安装mariadb安装php配置nginx 部署Discuz论坛系统下载Discuz论坛系统代码包部署Discuz论坛系统配置虚拟主机安装Discuz论坛访问站点尝试注册一个账号 LNMP架构&部署Discuz论坛系统 部署LNMP架构…