如何做前端组件的引用统计？

Question

最近新开发了一个组件库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(次)

Answer 1

这就很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出来逻辑是简单的，相信这个难不倒你，因此你需要的就是了解一下上面我说的几个知识点即可。

Answer 2

自己写个loader再进行正在编译前对源码的使用的组件找出来并统计成一个json文件