自动生成目录md文件

4,652 阅读4分钟

agmd(auto generate md)

在任何需要生成文档的,文件夹下输入agmd, 就能自动生成目录 md 说明,执行的时候放在想要生成目录文件下,然后执行就能自动生成相对路径下的文件夹和文件的名字,如果文件里面还有在头部写注释的话,那么会一并带过来自动生成md文件。对于工程比较大的开发来说,这个脚本或许会帮你省下些许时间。

使用方法

需要有node环境

  1. 全局安装(必须全局安装,否则会报无法将“agmd”项识别为 cmdlet、函数、脚本文件或可运行程序的名称)

npm i agmd -g example,是我为演示准备的一些文件,并没有其他用

  1. 高级用法 有些需要把自动生成的文档插入到某个自动生成的 md 当中, 该插件导出了自动生成的 md 数据方法, 还有getFileNodes获得所有文件的具体信息, 可以 DIY 做出不同的文档

    import {getFileNodes, getMd} from agmd
    其中 getFileNodes 可以获得具体文件相关的信息
    getMd 得到最终输出的信息

创作背景

  1. 大家有没有被要求写一个目录文件的md说明呢?
  2. 或者工程目录和文件被移动位置重构了,这时还需要重新修改md文件里面的目录说明
  3. 接手老工程,看了md说明,能对文件夹里面的文件功能做到一目了然,而不是点开对应文件去看
  4. 分析源码工程需要做点笔记

基于以上三点痛点,这边就开撸代码,分享出来,解决和我有相同需求的人。

首先要得到所有文件夹和文件名,并且是children格式,那么必然会有个递归,从文件夹里面一直找到文件。 下面先来个简单的,让大家一看就懂,这里主要是循环递归目录,把一个文件或文件夹当做一个obj,放到nodes里面,然后创建了一个level字段,记录文件的层级深度,为后面的排版按层级设置提供必要信息

功能列表

  1. 自动生成匹配目录的文件夹名和文件(已经按名称进行排序)
  2. 自动进行层级目录判断进行缩进
  3. 如果文件顶部有注释, 那么会自动进行判断
  4. 支持在任意文件目录下递归查找下级文件(不要在很大目录下执行啊!!!递归直到该级目录下没有文件为止)
  5. 目前支持记录 .js .vue .ts 和文件夹, 当然也支持其他, 这个版本我就写这么多, 后续有需要的可以提 pr
function getFileNodes(nodes = [], dir = './', level = 0) {
  let files = fs
    .readdirSync(dir)
    .map(item => {
      const fullPath = path.join(dir, item)
      const isDir = fs.lstatSync(fullPath).isDirectory()
      return {
        name: item,
        isDir: isDir,
        level
      }
    })
  for (let index = 0; index < files.length; index++) {
    const item = files[index]
    let note = '' // 文件注释
    let arr = filterArr.findIndex(obj => obj === item.name)
    if (arr === -1) {
      const fullPath = path.join(dir, item.name)
      const isDir = fs.lstatSync(fullPath).isDirectory()
      if (isDir) {
      // 递归
        getFileNodes((item.children = []), fullPath, level + 1)
      } else {
      
      }
      nodes.push(item)
    }
  }
  return nodes
}

调用上面的方法,就能够得到一个生成的children的对象,把它打印生成到js文件中,这样子方便后续调试

const nodes= getFileNodes()
wirteJs(JSON.stringify(nodes), './readme-file.js')
/**
 * @description: 把结果写入到js文件
 * @param {data}  要写的数据
 * @return {fileName}  要写入文件地址
 */
function wirteJs(data, filePath) {
  let file = path.resolve(__dirname, filePath)
  const pre = 'export default'
  // 异步写入数据到文件
  fs.writeFile(file, pre + data, { encoding: 'utf8' }, err => {})
}

再用一个递归取出所有需要的信息,有人可能会要讲一个递归不能搞定么? 还要搞两个?我之前也是搞的一个,是能生成出来,但是因为生成出来的文件,没有按我们需要的要求,比如文件夹排前面,文件按名称排序,所以生成出来的结构对应不到编辑器,那还是个摆设。

下面的两个push也不能合成一个,合成一个就会出现文件夹和文件位置摆放错误,虽然文字还是相同的文字,位置很重要

/**
 * @description: 递归得到文件名+note
 * @param {*} datas
 * @param {*} keys
 * @return {*}
 */
function getNote(datas, keys) {
  let nodes = keys ? keys : []
  datas.forEach(obj => {
    if (obj.children) {
      // 文件夹
      let md = setMd(obj)
      nodes.push(md)
      getNote(obj.children, nodes)
    }
    // 文件
    else {
      let md = setMd(obj)
      nodes.push(md)
    }
  })
  return nodes
}

const nodes= getFileNodes()
const objs= getNote(nodes)

到这里,就拿到了树形结构点的objs, 后面的就是一些常规操作了,没啥了,最重要就在前面了 这里贴一个完整代码git地址, github.com/kakajun/aut…

有兴趣的大家拷贝过去就能直接用,如果觉得这个分享能帮助到你,还请指为我点个免费的赞。