源码阅读必备神器
作为前端开发,阅读源码是我们快速提升的一个通道,但是咱们又没有整块的时间来干这个事,咱们只能用晚上零碎的时间来阅读源码,但这样子会存在一个问题,昨天阅读的一个今天又忘记得差不多了,怎么能快速回忆起昨天阅读的模块呢? 这里向大家推荐一款node插件–agmd(auto generate md), 大家在npm的插件里面就能搜到,它可以在任何需要生成文档的,文件夹下输入agmd, 就能自动生成目录markdown说明
使用方法
需要有node环境
全局安装(必须全局安装,否则会报无法将“agmd”项识别为 cmdlet、函数、脚本文件或可运行程序的名称)
npm i agmd -g
安装完成后,在需要记录 md 的文件夹下面输入agmd,会自动生成相对路径下的文件夹和文件的名字,如果文件里面还有在头部写注释的话,那么会一并带过来自动生成 markdown文件。生成的文件名为readme-md.md
案例
比如咱们阅读了vue-echarts的源码,咱首先会首先看一下该源码的大概结构,记录一下每个模块大概是干嘛的,了解大概后咱就可以分模块文件到里面去打注释分析了,到了第二天,咱还能看一下这个图,回顾一下昨天的知识点,刚好回忆一下,这样子就有一个很好的衔接过程
该插件拥有以下功能:
1.自动生成匹配目录的文件夹名和文件(已经按名称进行排序) 2. 自动进行层级目录判断进行缩进 3. 如果文件顶部有注释, 那么会自动进行判断加入 4. 支持在任意文件目录下递归查找下级文件(不要在很大目录下执行啊!!!递归直到该级目录下没有文件为止) 5. 目前支持记录 .js .vue .ts 和文件夹, 当然也支持其他, 后续有需要的可以提 pr
高级功能
有些需要把自动生成的文档插入到某个自动生成的 md 当中, 该插件导出了自动生成的 md 数据方法, 还有getFileNodes获得所有文件的具体信息, 可以 DIY 做出不同的文档
import {getFileNodes, getMd} from agmd
其中getFileNodes() 可以获得文件节点的所有信息,可从节点信息里面或许自己想要的东东,getMd() 方法可以得到最终渲染的字符串信息,获取后可以自己插到自己想要插到md或其他文件的位置
最后贴一下开源git地址,有性趣研究的可以folk一波 auto-generate-md
|