你的小程序总共引入了多少组件？

前言

当我们需要开始为小程序搭建 UI组件库 的时候，首先，我们需要知道小程序页面到底引用了哪些组件？组件是怎么散落地分布到我们的各个文件夹下面的？

因此，查组件 是我们搭建组件库之前必须要完成的准备工作，单靠人的肉眼去排查，很容易出现遗漏，于是我在本篇文章给大家演示了一下如果通过写脚本的方式，去将古老小程序项目的散落分布的组件逐一统计出来，并导出成 csv 的文件格式。

准备工作

1. 安装 nodejs，npm
2. 安装 objects-to-csv 包（将object对象数组导出成csv）

编码

1. 获取当前目录下的所有文件

读取当前目录，如果当前目录下的文件格式还是目录结构，递归执行本身，继续获取当前的目录下所有文件。

/**
 * 获取目录下的所有文件名
 * @param {*} directory 
 */
function getAllFiles(directory) {
  let result = []
  const files = fs.readdirSync(directory)
  for (let item of files) {
    const path = directory + '/' + item
    const isDir = fs.statSync(path).isDirectory()
    if (isDir) {
      result = [...result, ...getAllFiles(path)]
    } else {
      result.push(path)
    }
  }
  return result
}

2. 过滤出需要分析的js，json文件

因为我们需要对引入的组件做分析，而 json 文件的 usingComponents 属性是我们引入组件的入口配置对象，因此我们要从中获取到 json 文件来分析。

/**
 * 过滤出需要统计的js及其同名的json文件 [{jsFile: xx, jsonFile: yy}]
 * @param {*} allFiles 
 */
function getFilterFiles(allFiles) {
  const filterFiles = []
  for (let begin = 0, len = allFiles.length; begin < len; begin++) {
    const filePath = allFiles[begin]
    const [filename, dst] = getFileName(filePath)

    if (!['json', 'js'].includes(dst)) {
      continue
    }

    for (let j = begin + 1; j < len; j++) {
      const mapFilePath = allFiles[j]
      const [mapFilename, mapDst] = getFileName(mapFilePath)

      if (filename === mapFilename && ['json', 'js'].includes(mapDst)) {
        filterFiles.push({
          [`${dst}File`]: filePath,
          [`${mapDst}File`]: mapFilePath,
        })
        break;
      }
    }
  }
  return filterFiles
}

3. 根据json文件的usingComponents属性解析出组件数组

读取json文件，它本身读取出来就是json格式字符串，因此我们需要通过 JSON.parse 来获取json对象，然后遍历添加到组件数组：

/**
 * 统计文件用引用的组件及其路径
 * @param {*} jsonFile 
 * @param {*} jsFile 
 */
function statComponents(jsonFile, jsFile) {
  if (!jsonFile || !jsFile) return

  const jsonDataStr = fs.readFileSync(jsonFile)
  const jsonData = JSON.parse(jsonDataStr)
  const result = []

  if (jsonData) {
    const { usingComponents } = jsonData
    const componentList= []

    for (let key in usingComponents) {
      componentList.push({
        name: key,
        path: usingComponents[key]
      })
    }

    result.push({
      file: jsFile,
      components: componentList
    })
  }
  return result
}

4. 导出csv格式

最后就是objects-to-csv将获取到的页面组件数组，导出到csv文件即可：

  // 导出csv文件
  const csv = new ObjectsToCsv(components)
  await csv.toDisk(dirname + '/shell/component_stat.csv')

导出效果

项目地址

项目地址：https://github.com/csonchen/wx-mall-components

有需要的同学可以自行下载脚本文件，然后修改一下入口目录的路径，在本地用 node 命令执行脚本文件就可以跑起来了，这样就可以分析出你当前的小程序项目每个页面引用到的组件路径。

接下来我们要分析出页面的哪些组件引入是多余存在的，是我们需要从项目中移除出来的，哪些组件是重复存在的，哪些才是我们真正需要重构的，欢迎大家继续关注。