从一个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])
    );
  });
}
相关推荐
魔芋红茶40 分钟前
spring-initializer
python·学习·spring
西岭千秋雪_1 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
随便取个六字1 小时前
GIT操作 学习
git·学习
chuanauc1 小时前
Kubernets K8s 学习
java·学习·kubernetes
小张是铁粉1 小时前
docker学习二天之镜像操作与容器操作
学习·docker·容器
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
小张是铁粉2 小时前
oracle的内存架构学习
数据库·学习·oracle·架构
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
HERR_QQ2 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序