用50行代码统计组件使用次数

想了解项目里使用了哪些三方组件库，以及它们的的使用频率？本文将教你如何统计项目中组件的使用情况。

思路：Webpack loader（AST）。

最简单的方法是通过字符串统计。用正则的方式一把梭，但需要注意注释部分也会被统计进去，这样就不准确了。因此，这里通过 AST（抽象语法树）来统计。

1. 安装必要的包

首先，你需要安装必要的包：

npm install --save-dev webpack webpack-cli @babel/core @babel/preset-env @babel/loader

2. 创建 webpack 配置文件

在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: '@babel/loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

3. 创建 webpack loader

在项目根目录下创建一个名为 webpack-loader.js 的文件，并添加以下内容：

const parser = require('@babel/parser');
const traverse = require('@babel/traverse');
const types = require('@babel/types');

module.exports = function(source) {
  const ast = parser.parse(source, {
    sourceType: 'module',
  });

  const components = [];

  traverse.default(ast, {
    ImportDeclaration: {
      enter(path) {
        const { value } = path.node.source;
        if (value.startsWith('~') || value.startsWith('.')) {
          components.push(value);
        }
      },
    },
  });

  return `module.exports = ${JSON.stringify(components)};`;
};

4. 在 webpack 配置文件中添加 loader

在 webpack.config.js 文件中，在 module.rules 中添加以下内容：

{
  test: /\.js$/,
  use: [
    'webpack-loader',
    '@babel/loader',
  ],
},

5. 运行 webpack

在终端中，运行以下命令：

webpack

这将生成一个名为 bundle.js 的文件，其中包含了项目中使用的所有组件。

6. 解析结果

使用以下命令可以解析结果：

node bundle.js

这将输出一个数组，其中包含了项目中使用的所有组件。

通过这种方法，你可以轻松地统计项目中组件的使用情况。