前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维

你会学到什么?

  1. 掌握 AST 相关知识,学习代码编译原理;
  2. 掌握 TypeScript Compiler API 的用法;
  3. 学习代码分析工具的架构设计,代码设计模式;
  4. 建立依赖调用分析的通用方法论(分析范式);
  5. 学习设计插件方案,解耦主程序与插件程序;
  6. 熟悉大型前端团队的 Workflow,工程化体系;
  7. 学习配置 GitLab CI,实现代码分析自动化。

课程简介

目前很多巨型 Web 应用都基于 微前端架构, 采用多团队 / 多角色协同开发的模式,上层业务开发团队的 子应用项目 依赖下层基础架构团队维护的 基础项目(主应用、组件库、工具库)。

前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维

对于扮演依赖提供方角色的基础架构团队,由于不清楚基础项目导出的 API 在各个子应用项目中真实的调用及分布信息,所以在工具库升级、基础框架重构时,无法评估新变更对于子应用项目团队的影响程度,通常只能无限向后兼容,导致基础框架越发臃肿,难以维护。

想要了解上下层项目间真实的代码依赖关系,最有效的做法是对全部子应用进行代码静态分析,对项目代码中的 API 调用进行定位 & 检测 & 统计 & 分析,生成代码分析报告。

前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维

很多前端工程师对于代码静态分析领域的知识储备比较少,很难独立开发针对特定分析目的的代码分析工具。小册针对这个痛点,从前端依赖治理这个角度出发,由浅入深式的讲解代码静态分析需要掌握的基础知识、通用能力,帮助开发者从 0 到 1 实现前端代码分析工具。

前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维

代码分析工具可以帮助开发者实现“脏调用”拦截,代码评分、代码告警等应用场景,通过集成代码分析能力搭建代码分析平台还可以处理分析更多维度的 API 调用数据。

前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维
前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维
前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维

小册总共 17 小节,大致可分成基础知识、具体实现、应用场景三个阶段。

阶段一: 学习 AST 抽象语法树、编译原理,利用所学知识实现简单的 TS 代码分析脚本,帮助开发者快速上手。

阶段二: 学习工具架构设计,掌握依赖调用的分析范式,建立通用方法论,根据分析范式逐步实现分析工具。

阶段三: 学习配置 GitLab CI,通过分析工具实现“脏调用”拦截、自动化分析、报告推送、代码告警等应用场景。

前端依赖治理:代码分析工具开发实战,掌握代码静态分析通用能力,深化工程化思维

课程目录

开篇词:我们为什么需要代码分析?
基础知识:一次搞懂 AST 抽象语法树
基础知识:从分析一段 TS 代码开始
具体实现:架构设计 & 分析范式
具体实现:扫描 & 解析 TS 文件
具体实现:分析 Import 节点
具体实现:判定 API 调用
具体实现:API 用途分析
具体实现:分析插件方案设计
具体实现:Browser API 调用分析
具体实现:提取 Vue 文件中 TS 代码
具体实现:整理分析数据
具体实现:入口设计 & 发布 NPM 包
具体实现:开发自定义分析插件
应用场景:“脏调用”拦截 & CI 自动化分析
应用场景:微前端业务全应用代码分析
结语:总结 & 延伸

讲师介绍

iceman 要早睡,前端技术专家,目前就职于某跨境电商公司,负责基础平台微前端架构设计、工程化体系建设等工作。作为前腾讯高级工程师,负责过手机 QQ、腾讯文档、QQ 小程序平台,以及腾讯云 TRTC 等项目的开发工作。平时乐于分享,是多项技术专利第一撰写人。擅长领域有:前端工程化、音视频开发、3D 渲染等。

(0)
上一篇 2023年3月15日 上午11:29
下一篇 2023年3月24日 下午3:25

相关推荐

发表回复

登录后才能评论