从一个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)的工具
js 复制代码
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,什么意思?
js 复制代码
function genObjectProperties(svgIcons: ISvgIcons): t.ObjectProperty[] {
  return Object.keys(svgIcons || {}).map((item) => {
    return t.objectProperty(
    	t.stringLiteral(item), // 创建一个字符串字面量节点
    	genIconProperties(svgIcons[item])
    );
  });
}
相关推荐
naice5 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼9 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin14 分钟前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗17 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69631 分钟前
CSS-响应式布局
前端
三小河36 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法40 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku41 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69644 分钟前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js