最近新开发了一个组件库X(类似于内部使用的 antd)。
然后想统计一下X中各个组件的使用情况，然后针对组件使用情况，对用的多的组件进行功能扩展和代码优化。
比如
// A.tsx
import { Button } from 'X'
...
return (<div><Button>1</Button><Button>2</Button></div>)
...
// B.tsx
import { Button, Modal } from 'X'
...
return (<div><Button>1</Button><Modal /></div>)
...
那么应该可以统计出 某个 json 文件。 (考虑加到CI里自动执行)
Button: A.tsx 2(次) B.tsx 1(次) Modal: B.tsx 1(次)
已解决
悬赏分：70
- 解决时间 2021-11-26 14:44
点赞 0反对 0举报 0
收藏 0
分享 0
回答2
最佳
-
这就很AST了。 这种情况你可以自己写一个loader来解析。
关于loader
本质上 loader 就是一个函数。 是一个接受前一个 loader 或原始内容处理的结果，并返回结果的一个函数。 webpack 将这些 loaders（很多函数）按照一定的顺序执行，如果你了解函数式编程的话， 他就是函数式编程中的 compose（组合），如果你了解 shell 的话，他就是 shell 中的 pipe（管道）。
这里有实现的一个最简版的webpack你可以参考一下 https://github.com/azl397985856/mono-webpack/tree/lecture/part-2
关于AST
它的功能非常丰富，在这里我用它将代码转化为 AST(抽象语法树)。 如果对这个概念不是很熟悉的，建议先学习（至少知道做了什么）再继续往下看。
这里有一个在线的交互式场景，展示了我们的代码是转化成的 ast 是怎么样的。
另外你需要babel-traverse，其实就是访问者模式。 这个也是 babel 家族的一个库。用于提供用户访问 ast 节点的能力,官方称之为访问者（visitor）。 在这里我们使用它来完成依赖的收集，就是将文件的 import 语句 收集起来。
如何做
总的来说你需要自己写一个loader，然后去访问ast节点，根据节点信息构造除一个json出来。其实根据节点信息构造除一个json出来逻辑是简单的，相信这个难不倒你，因此你需要的就是了解一下上面我说的几个知识点即可。
支持 0 反对 0 举报2021-11-26 11:52
