从一个webpack loader中学习

news2024/11/19 0:27:42
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.coloradmin.cn/o/1124736.html

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

相关文章

vue按特定字符串切割后端传输的图片路径

一、分隔字符 /userfiles/1/attachment/null/2023/10/13967b6b8332413f92ab67735873aa76.jpg|/userfiles/1/attachment/null/2023/10/17fd6e2c16144e66b8cd3ec495e6745f.png 后端传来图片的路径是按照 | 进行分隔的 首先在return中定义数组 在methods中添加分隔方法 //将查询…

请求转发和响应重定向

请求转发与响应重定向是什么? 请求转发和响应重定向是两种在HTTP协议中常见的操作,用于在服务器和客户端之间传递数据。 请求转发(RequestDispatcher)是服务器收到请求后,从一个资源跳转到另一个资源的操作。这种操作…

机器学习-学习率:从理论到实战,探索学习率的调整策略

目录 一、引言二、学习率基础定义与解释学习率与梯度下降学习率对模型性能的影响 三、学习率调整策略常量学习率时间衰减自适应学习率AdaGradRMSpropAdam 四、学习率的代码实战环境设置数据和模型常量学习率时间衰减Adam优化器 五、学习率的最佳实践学习率范围测试循环学习率&a…

递归方法实现字符串反转函数

递归函数是一种在函数内部调用自身的函数。它通过将复杂的问题分解成更小的子问题来解决。递归函数通常包含两部分&#xff1a;基本情况和递归调用。请使用递归方法实现字符串反转的C语言函数。 #include <stdio.h>void reverseString(char* str) {///Begin///// 递归基…

【M365运维】给从本地同步到O365的DL添加 Send As权限

【问题】在一个混合部署的M365环境里&#xff0c;邮件系统已经从本地迁移到O365&#xff0c;相关的AD用户、AD 组等账号数据也都同步到了Azure AD。用户提出要求想为一个DL 添加 Send As 权限。 由于DL是从本地迁移到O365的&#xff0c;在O365的Exchange 管理中心里进行设置时…

外汇天眼:如何快速玩转外汇市场?这个技巧你必须知道!

在外汇市场中&#xff0c;决定交易成功与否的关键在于投资者的技能和知识扎不扎实&#xff0c;这对投资者获取利润至关重要。然而对于投资者来说&#xff0c;外汇交易市场又是一个复杂且多变的市场&#xff0c;要在外汇市场中获得成功并不容易&#xff0c;需要深入地了解、不断…

leetcode每日一题复盘(10.23~10.29)

leetcode 450 删除二叉搜索树中的节点 见到二叉搜索树第一时间就应该想起用中序遍历,知道中序遍历之后接下来想如何删除节点了(左右遍历根据节点大小决定向左向右移动) 遍历找不到目标节点,就不用进行操作直接返回根节点就好了 当遍历找到要删除的节点(root)时,根据子树情况…

MES管理系统的生产模块与ERP有何差异

随着信息化技术的不断发展&#xff0c;企业对于生产管理系统的要求也日益提高。MES生产管理系统和ERP系统都是企业生产管理的重要工具&#xff0c;而它们的生产模块存在一些差异。 首先&#xff0c;MES管理系统的生产模块更加注重于生产过程的实时管理和控制。它可以通过数据采…

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

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

如何提高广告投放转化率?Share Creators 资产库与Appsflyer营销数据的全面结合

如何提高广告投放转化率&#xff1f;Share Creators 资产库与Appsflyer营销数据的全面结合 全球经济进入了低迷期。 营销成本越来越高&#xff0c; 营销需要更务实&#xff0c;注重投入产出比。众所周知&#xff0c;除了渠道、客群画像以外&#xff0c; 优秀的广告设计图&#…

Cesium冷知识:Sandcastle新增示例组

Cesium.js的SandCastle中有很多示例 他们根据不同类型分为不同的组 在cesium.js的源码中&#xff0c;把示例的 <meta content"自己定义新的组名">值改为自定义的组名 然后执行npm run build&#xff0c;就可以创建出一个新的组 这种方法在下面这些Cesium.js版…

c语言进阶部分详解(详细解析自定义类型——结构体,内存对齐,位段)

上篇文章介绍了一些常用的字符串函数&#xff0c;大家可以去我的主页进行浏览。 各种源码大家可以去我的github主页进行查找&#xff1a;Nerosts/just-a-try: 学习c语言的过程、真 (github.com) 今天要介绍的是&#xff1a;结构体的相关内容 目录 一.结构体类型的声明 1.…

Jmeter之处理session、cookie以及如何做关联

session和cookie的概念 按照我的理解就是&#xff1a; cookie保持你访问的权限信息。 session限制你访问权限信息的有效时间&#xff0c;一旦过期就不能在访问了&#xff0c;比如说我们经常遇到了&#xff0c;很长一段时间网页没有去操作&#xff0c;就会自动退出登陆。你要…

ZooKeeper下载、安装、配置和使用

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

node-red常用包分析

node-red-contrib-opcua Use OpcUa-Item to define variables. Use OpcUa-Client to read / write / subscribe / browse OPC UA server. 需要想通过OpcUa-Item节点来指定一个数据点。 触发器-->opcua_item----->opcua_client opcua_client的Action项解析&#xff1a; …

LVS负载均衡集群+NAT部署

集群的概念和目的 集群的定义 Cluster&#xff0c;集群&#xff08;也称群集&#xff09;由多台主机构成&#xff0c;但对外只表现为一一个整体&#xff0c;只提供一-个访问入口(域名或IP地址)&#xff0c; 相当于一台大型计算机。 集群的作用 对于企业服务的的性能提升一般…

感觉真的要被淘汰了,工作3年,不懂自动化,看着公司的新员工都是自动化岗....

这两天和朋友谈到软件测试的发展&#xff1a;这一行的变化确实蛮大&#xff0c;从开始最基础的功能测试&#xff0c;到现在自动化、性能、安全乃至于以后可能出现的大数据测试、AI测试岗位需求逐渐增多。我也在软件测试这行摸爬滚打了十年了&#xff0c;正好有朋友问我&#xf…

最全面的msvcp140_atomic_wait.dll丢失的解决方法,教你怎么快速修复dll文件

在众多电脑使用者中&#xff0c;碰到过"msvcp140_atomic_wait.dll文件丢失"这样的问题的人并不鲜见。突如其来的错误提示常让人感到困扰&#xff0c;但无需过于焦虑&#xff0c;因为这类问题多数都有成熟的解决方案。在这篇文章中&#xff0c;我们将深入探讨如何针对…

Codeforces Round #905(Div.3)

A. Morning 题目 给定4位数字码&#xff0c;每位数字取值0-9。排列顺序如下&#xff1a; 初始光标指向1&#xff0c;每次可执行其中一个操作 1、输出光标所指数字 2、移动光标到相邻位置上。如3可移动到2或4&#xff0c;其中1只能移动到2&#xff0c;0只能移动到9。 问&…

离线电商数仓(一)

一、数据仓库概述 1. 数据仓库 数据仓库是一个为数据分析而设计的企业级数据管理系统。数据仓库可集中、整合多个数据源的大量数据&#xff0c;企业可以从数据仓库中获取宝贵数据进行决策。 数据分类&#xff1a;业务数据、日志数据 将这两种数据从业务系统采集到Hive中&…