前言

发布了npm包，具体使用方法可查看 Github

• 在介绍需求或者想要表达自己的文件结构，我们一般都会用到文件树的表达形式，但是在文件很多的情况下我们一个一个去排版这些文件结果可能会造成排版错误，因此我们可以写一个 node 脚本来帮助我们生成这些文件数结构。

书写代码

假如我们将代码放在了文件目录下的 create-file-tree.js 中。

const path = require("path");
const fs = require("fs");

const config = {
  // 忽略的文件夹名称
  ignoreDir: new RegExp("node_modules|.git"),
  // 忽略的文件名称
  ignoreFile: new RegExp(".*.(tsx|css|svg|ico)|a.js"),
  // 生成文件树结构前缀
  prefix: "├─── ",
};

function createFileMap(filePath = process.cwd()) {
  const fileMap = {};
  // 读取当前文件夹下所有的文件信息
  const allFileInfo = fs.readdirSync(filePath);
  // 遍历所有文件信息
  for (const fileName of allFileInfo) {
    const statsPath = path.join(filePath, fileName);
    // 获取当前文件信息
    const stats = fs.statSync(statsPath);
    // 判断是否是文件夹
    if (stats.isDirectory() && !config.ignoreDir.test(fileName)) {
      const result = createFileMap(statsPath);
      fileMap[fileName] = result;
      // 判断是否是文件
    } else if (stats.isFile() && !config.ignoreFile.test(fileName)) {
      fileMap[fileName] = undefined;
    }
  }
  return fileMap;
}

const createFileTree = (fileMap, index = 1) => {
  let fileTree = "";
  // 获取所有文件夹
  const dir = Object.keys(fileMap).filter((item) => fileMap[item]);
  // 获取所有文件
  const file = Object.keys(fileMap).filter((item) => !fileMap[item]);
  const fileStart = config.prefix.repeat(index);
  // 先递归生成文件夹
  dir.forEach((item) => {
    fileTree += `${fileStart}${item}\n`;
    // 如果当前文件结构下有信息，再递归遍历
    if (Object.keys(fileMap[item]).length > 0) {
      fileTree += createFileTree(fileMap[item], index + 1);
    }
  });
  // 再生成文件
  file.forEach((item) => {
    fileTree += `${fileStart}${item}\n`;
  });
  return fileTree;
};

console.log(createFileTree(createFileMap()));

运行结果

执行 node create-file-tree.js 你将在控制台看到当前文件下所生成的对应文件树结构。

├─── public
├─── src
├─── ├─── apis
├─── ├─── app
├─── ├─── components
├─── ├─── constants
├─── ├─── hooks
├─── ├─── store
├─── ├─── styles
├─── ├─── types
├─── ├─── typlings
├─── ├─── utils
├─── .eslintrc.json
├─── .gitignore
├─── next-env.d.ts
├─── next.config.mjs
├─── package-lock.json
├─── package.json
├─── README.md
├─── tailwind.config.ts
├─── tsconfig.json