当前位置：首页 > article >正文

从一个webpack loader中学习

article 2024/11/17 8:47: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)

@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);

@babel/parser：将源代码解析成AST
@babel/generator：将AST 解码成js代码

函数返回值类型为`t.ObjectProperty()和t.objectExpression`，什么意思？

t.objectProperty() // 创建一个对象
t.objectExpression() // 创建一个对象表达式

import * as t from '@babel/types';

function genObjectProperties(svgIcons: ISvgIcons): t.ObjectProperty[] {
  return Object.keys(svgIcons || {}).map((item) => {
    return t.objectProperty(
    	t.stringLiteral(item), // 创建一个字符串字面量
    	genIconProperties(svgIcons[item])
    );
  });
}

function genIconProperties(iconInfo: IIconInfo): t.ObjectExpression {
  // 创建对象表达式
  return t.objectExpression(Object.keys(iconInfo || {}).map((item) => {
    return t.objectProperty(t.stringLiteral(item), t.stringLiteral(iconInfo[item].toString()));
  }));
}