- 获取指定文件夹内的所有文件、文件夹
- 输出包含文件目录树结构展示的 html 静态页
- 在该目录 output 文件夹下,生成该目录名 node-dir-tree.json
- 安装,额,就一个依赖,为了 log 好看点儿
npm install
- 生成的目录树文件
npm start [dir] // dir为指定的目录
- 预览生成的 html
npm run pr
首先,表示目录的对象结构应该是这样的(这里偷个懒用 ts 的类型定义表示一下)
type treeObj = {
"dir": string, // 文件夹路径
"childFiles": { //子文件
"short": string; // 文件名
"full": string; // 完成路径
}[],
childDir: { //子文件夹
[string]: treeObj
}
}
- 读取给定的目标文件夹(不是文件夹的另作处理),获取所有文件和文件夹组成的数组
- 循环数组,判断是文件夹还是文件,文件的话直接 push 到 childFiles
- 文件夹的话,先把当前文件夹作为 key,存到父级文件夹的 childDir 属性下,然后自调用传当前文件夹路径
- 以上步骤重复,直到达到最底层空文件夹或该文件夹只有文件
- 根据得到的树形对象,生成 html 文件并写入 dom 节点即可