从一个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])
    );
  });
}
相关推荐
Diamond技术流3 分钟前
从0开始学习Linux——网络配置
linux·运维·网络·学习·安全·centos
斑布斑布6 分钟前
【linux学习2】linux基本命令行操作总结
linux·运维·服务器·学习
bysking33 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
Chef_Chen1 小时前
从0开始学习机器学习--Day13--神经网络如何处理复杂非线性函数
神经网络·学习·机器学习
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4111 小时前
无网络安装ionic和运行
前端·npm
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb