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
,什么意思?
function genObjectProperties(svgIcons: ISvgIcons): t.ObjectProperty[] {
return Object.keys(svgIcons || {}).map((item) => {
return t.objectProperty(
t.stringLiteral(item), // 创建一个字符串字面量节点
genIconProperties(svgIcons[item])
);
});
}