从一个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
2
3
4
5
6
7
8
9
10
11
12
13

2. @babel/parser：将源代码解析成AST
3. @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()));
  }));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

可借鉴该文章辅助理解