项目代码依赖实现功能
实现导出函数级影响面分析
假设我们在a.js有两个导出函数a1
a2
,a1
被b.js
引用,a2
被c.js
引用,当更改a1
时,影响的文件只会是b.js
,而不会影响c.js
,这就是函数级影响面分析。
插件参数
entry
指定入口,会从入口处开始分析,默认是index.html
ignores
忽略某些文件,文件路径为 entry + ignore 路径
ignorePlugins
忽略某些插件
commitHash
指定 git commit 的hash 值,默认是当前分支的最新 commit hash
核心概念
导入函数
导入函数分为:
import xx from a
,default 导入import * as xx from a
,命名空间导入import {a1,a2} from a
,具名导入
生命周期
初始化
初始化时,会通过打包工具拿取所有文件的导入导出关系,并保存源码路径和绝对路径的映射。
打包时
会收集模块导出使用情况和移除情况,并生产依赖关系图。
依赖关系图初始化时
调用getAllExportEffected
方法获取所有被影响的导出
从 entry
开始,深度优先遍历所有的导入
单个文件遍历
遍历该文件所有使用了的导出函数
如果是vite
调用vite build对该文件的这个导出函数二次打包,获取treeShaking 后的代码,对vue文件单独处理
所有非虚拟模块的依赖都被标记为 external: true
,moduleSideEffects: true
表示虽然保留引用,但不解析内容
因而可以通过对比前后文件的差异,判断本地代码是否有改动
如果是webpack
调用 ast 获取treeShaking 后的代码
对比前后文件的差异,判断本地代码是否有改动
之后判断该文件的导入是否有变动,标记变动的导入和对应影响的导出