从一个webpack loader中学习

webpack loader中学习"/>

从一个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);

2. @babel/parser：将源代码解析成AST
3. @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]));});
}