这是[【Node.js实战】](https://juejin.cn/column/7125427604525416455)专栏内的第5篇文章，专栏是分享使用Node.js技术编写实用脚本技巧。

专栏现有文章：

1.  [仿jsDoc写一个最简单的文档生成](https://juejin.cn/post/7119105933661175838)
1.  [50+行代码搞定一行命令更新Npm包](https://juejin.cn/post/7068969844607189029)
1.  [玩转nodeJs文件模块](https://juejin.cn/post/7072972877628178440)
1.  [Node.js操作Dom ，轻松hold住简单爬虫](https://juejin.cn/post/7184260401139220536)

欢迎读者关注[【Node.js实战】](https://juejin.cn/column/7125427604525416455)专栏。

企业项目进行数据埋点后，埋点事件名需要整理成Excel表格便于统计，目标是将下图左侧数据转化成下图右侧的Excel表格：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6157ae34ce349e9aad2d2ff87b43111~tplv-k3u1fbpfcp-zoom-1.image)

考虑到左侧埋点数据是随项目迭代增加的，埋点数据每增加一次我就要把数据一条一条的Ctrl+C/V复制粘贴至Excel表格内。

懒，不想这样玩，于是我写了一个自动帮我整理成表格的脚本。




## 脚本实现

### 实现流程

-   Node.js生成Excel表格工具库技术选型
-   单独复制一份埋点数据出来，保证它的变动不会影响业务相关埋点逻辑
-   整理埋点数据成我们需要的数据结构

分成三步走

### 技术选型

Node.js操作Excel表格工具库有：

-   [exceljs](https://github.com/exceljs/exceljs)
-   [excellentexport](https://github.com/jmaister/excellentexport)
-   [node-xlsx](https://github.com/mgcrea/node-xlsx)
-   [xlsx-template](https://github.com/optilude/xlsx-template)

仅罗列以上四个。

选择的角度有以下几点：

-   学习成本低，文档API简单易用，仅生成表格即可，其他功能并不需要，所以API越简单越好
-   生成Excel表格需要提供的数据结构简单，便于实现
-   能导出xlsx表格，满足最基本要求

[node-xlsx](https://github.com/mgcrea/node-xlsx)最贴近以上要求，首选使用它。

[node-xlsx](https://github.com/mgcrea/node-xlsx)官方生成Excel表格给出的代码块：

```
import xlsx from 'node-xlsx';
// Or var xlsx = require('node-xlsx').default;

const data = [
  [1, 2, 3],
  [true, false, null, 'sheetjs'],
  ['foo', 'bar', new Date('2014-02-19T14:30Z'), '0.3'],
  ['baz', null, 'qux'],
];
var buffer = xlsx.build([{name: 'mySheetName', data: data}]); // Returns a buffer
```

生成表格数据`data`是二维数组，对应表格的行列。`data.length` 为表格行数，`data[0].length` 为表格的列数；`data[0][0]`对应至表格的第一行第一列的值，`data[0][1]`对应至表格的第一行第二列的值。

所以将埋点数据整理为一个二维数组即可，二维数组数据结构整理容易实现。

### 复制埋点数据

埋点数据统一放置在`buryData.js` 文件，但不能随意改动它，所以将该文件单独再复制一份出来。

`buryData.js`

```
export default {
    version1: 'v1.5.3',
    bury1: 'ding提醒',
    bury2: '审批-筛选',
    bury3: '任务-点击任务标题打开任务详情',
    bury4: '任务详情弹框-点击详情tab',
    bury5: '任务详情弹框-点击日志记录tab',
    bury6: '任务详情弹框-点击工作总结tab',
    bury7: '任务详情弹框-点击动态tab',
    //...
}
```

`buryData.js`复制出来文件命名为`bury.js`，还有一个问题：`bury.js`需要执行它，拿到它导出的数据对象，导出数据是使用ES6模块化语法，这边需要将ES6模块化转化成CommonJs模块化，将`export default {}` 替换成`module.exports ={}`即可做到。

Node.js fs模块+正则替换是可以达成以上目的，但为了更快捷，我选择使用工具库[magic-string](https://github.com/Rich-Harris/magic-string)

[magic-string](https://github.com/Rich-Harris/magic-string)它是操作字符串库，它可以帮我去掉写正则替换字符串的步骤。

```
const path = require('path');
const magicString = require('magic-string')
const fs = require('fs');

//buryData.js 文件路径
const buryFile = path.join(__dirname, '../src/lib/buryData.js')

const getBuryContent = (filePath) => {
    const content = fs.readFileSync(filePath, 'utf8')
    //将export default 替换成module.exports =
    const s = new magicString(content)
    s.replace('export default', 'module.exports = ')
    return s.toString()
}

(async () => {
    const str = getBuryContent(buryFile)
    //将替换后的内容写入至bury.js文件
    const copyFilePath = path.join(__dirname, '/bury.js')
    fs.writeFileSync(copyFilePath, str)
    //动态导入bury.js 获取埋点数据
    const { default: data } = await import(copyFilePath)
})()
```

### 生成二维数组

上文已提及，[node-xlsx](https://github.com/mgcrea/node-xlsx)生成表格需要先将数据整理成二维数组。

```
export default {
    version1: 'v1.5.3',
    bury1: 'ding提醒',
    /...
    version2: 'v1.5.4',
    bury21: '通讯录人员列表',
    //..
}
```

以上数据整理成：

```
[
  ['v1.5.3','v1.5.4'],
  ['ding提醒','通讯录人员列表'],
  //...
]
```

首先，将数据全部存放至一个`Map`对象中。因为埋点数据是一个对象，其中`version1、version2` 表示版本号，随项目迭代版本号会增多version3、version4……以`version`进行划分`Map` 值。

```js
const _ = require('lodash');
//...

const getFormatDataMap = (data) => {
    let version
    const map = new Map();
    _.forIn(data, (value, key) => {
        if (key.includes('version')) {
            version = value
            !map.has(version) && map.set(version, [value])
            return
        }
        const mapValue = map.get(version)
        mapValue.push(value)
    })
    return map
}

(async () => {
    const str = getBuryContent(buryFile)
    const copyFilePath = path.join(__dirname, '/bury.js')
    fs.writeFileSync(copyFilePath, str)
    const { default: data } = await import(copyFilePath)
    
    //新增
    const map = getFormatDataMap(data)
})()
```

`getFormatDataMap` 函数执行后，返回的数据是：

```
{
'v1.5.3'=>['v1.5.3','ding提醒' //...]
'v1.5.4'=>['v1.5.4','通讯录人员列表' //...]
}
```

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36b4fe54512b4bf3ac914d28e8142c05~tplv-k3u1fbpfcp-zoom-1.image)

然后，需要知道表格最大行数，表格列数即为`map.size()`，最大行数通过获取`Map.values()`获取所有的值`values`，遍历`values`获取`values`内存放的每一个数组的长度，长度统一用另一个数组`lens`临时记录，遍历结束后比较`lens`中的数值得到最大的值。

`MAX_LEN` 即为表格最大的行数，也是`values`存放的所有数组中长度最大的值。

```js
const _ = require('lodash');
//...
const getMergeArr = (map) => {
    const values = _.toArray(map.values())
    const lens = []
    //获取长度，长度值统一存放至lens数组中
    values.forEach((value) => { lens.push(value.length) })
    //比较
    const MAX_LEN = _.max(lens)
    
    return getTargetItems({ mapValue: values, forNum: MAX_LEN })
}

(async () => {
    const str = getBuryContent(buryFile)
    const copyFilePath = path.join(__dirname, '/bury.js')
    fs.writeFileSync(copyFilePath, str)
    const { default: data } = await import(copyFilePath)
    const map = getFormatDataMap(data)
    //新增
    const table = getMergeArr(map)
})()
```

最后，以`values`、`MAX_LEN`进行双循环。表格列数`map.size()`可获取，但为了方便直接`mapValue.length`,两者是相等的。

有了表格列数即可创建二维数组的第二层数组，`new Array(len).fill(' ')`第二层数组长度即为`mapValue.length`，创建时数组内的值先统一填充为`' '`。

```js
const getTargetItems = ({ mapValue, forNum }) => {
    const len = mapValue.length
    const targetItems = []
    mapValue.forEach((v, i) => {
        for (let index = 0; index < forNum; index++) {
            const element = v[index];
            let targetItem = targetItems[index]
            if (!targetItem) {
                //创建数组，值先统一填充为' '
                targetItem = new Array(len).fill(' ')
            }
            /**
                如果当前index大于数组v的长度，这时获取值v[index]为undefined。
                为undefined的话直接跳过，保持targetItem[i]为' '
            */
            targetItem[i] = element ? element : ' '
            targetItems[index] = targetItem
        }
    })
    return targetItems
}
```

完成二维数组的转化，数据结构为下图：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9abb49ebf6d4609b40daacff5283541~tplv-k3u1fbpfcp-zoom-1.image)

### 生成表格

数据已完成，留下的就是写入数据生成表格，直接复制[node-xlsx](https://github.com/mgcrea/node-xlsx)演示的代码下来。

```
//...

(async () => {
    const str = getBuryContent(buryFile)
    const copyFilePath = path.join(__dirname, '/bury.js')
    fs.writeFileSync(copyFilePath, str)
    const { default: data } = await import(copyFilePath)
    const map = getFormatDataMap(data)
    const table = getMergeArr(map)

    //写入数据，生成表格，返回buffer数据
    const buffer = xlsx.build([{ name: '埋点', data: table }])
    
    const outPath = path.join(__dirname, '/bury.xlsx')
    
    //bury.js文件可以删除，bury.xlsx如果已存在就先删了
    fs.existsSync(outPath) && fs.unlinkSync(outPath)
    fs.existsSync(copyFilePath) && fs.unlinkSync(copyFilePath)
    
    //创建一个bury.xlsx文件，将得到的buffer写入
    fs.writeFileSync(outPath, buffer)
})()
```

脚本完。

完整源码：

```js
const path = require('path');
const fs = require('fs');
const xlsx = require('node-xlsx');
const magicString = require('magic-string')
const _ = require('lodash');
const buryFile = path.join(__dirname, '../src/lib/buryData.js')
const getBuryContent = (filePath) => {
    const content = fs.readFileSync(filePath, 'utf8')
    const s = new magicString(content)
    s.replace('export default', 'module.exports = ')
    return s.toString()
}
const getFormatDataMap = (data) => {
    let version
    const map = new Map();
    _.forIn(data, (value, key) => {
        if (key.includes('version')) {
            version = value
            !map.has(version) && map.set(version, [value])
            return
        }
        const mapValue = map.get(version)
        mapValue.push(value)
    })
    return map
}
const getTargetItems = ({ mapValue, forNum }) => {
    const len = mapValue.length
    const targetItems = []
    mapValue.forEach((v, i) => {
        for (let index = 0; index < forNum; index++) {
            const element = v[index];
            let targetItem = targetItems[index]
            if (!targetItem) {
                targetItem = new Array(len).fill(' ')
            }
            targetItem[i] = element ? element : ' '
            targetItems[index] = targetItem
        }
    })
    return targetItems
}
const getMergeArr = (map) => {
    const values = _.toArray(map.values())
    const lens = []
    values.forEach((value) => { lens.push(value.length) })
    const MAX_LEN = _.max(lens)
    return getTargetItems({ mapValue: values, forNum: MAX_LEN })
}
(async () => {
    const str = getBuryContent(buryFile)
    const copyFilePath = path.join(__dirname, '/bury.js')
    fs.writeFileSync(copyFilePath, str)
    const { default: data } = await import(copyFilePath)
    const map = getFormatDataMap(data)
    const table = getMergeArr(map)
    debugger
    const buffer = xlsx.build([{ name: '埋点', data: table }])
    const outPath = path.join(__dirname, '/bury.xlsx')
    fs.existsSync(outPath) && fs.unlinkSync(outPath)
    fs.existsSync(copyFilePath) && fs.unlinkSync(copyFilePath)
    fs.writeFileSync(outPath, buffer)
})()
```

去掉空行，一百行以内。

## 总结

Node.js可使用的场景非赏多，不单单是用于服务器接口的开发，我们还能通过写脚本的形式解决生活中重复性的工作，凭藉js的语法简单及强大的生态，前端不必学习shell、python等，仅使用js就可以搞定爬虫、自动化脚本等场景。

如果我的文章对你有帮助，你的👍就是对我的最大支持^_^。

【Node.js】写一个数据自动整理成表格的脚本

![封面2.jpeg](http://112.124.1.74/static/img/35d5c12b29e9abb8d9d768249034c509.%E5%B0%81%E9%9D%A22.jpeg)
## 前言

前段时间，我发现一个[开源题库](https://github.com/lydiahallie/javascript-questions)，题目非常有意思。我想把它整成一个JSON文件做为数据储备，方便整活。

一共有一百五十多道题目，手动CV我肯定是不想干的。于是写了个脚本，在写脚本的过程中，我发现一个能让[Node.js操作Dom的开源项目](https://github.com/jsdom/jsdom)。

有了它，再加上jQuery就可以应对简单爬虫抓取数据了，所以写下这篇文章跟大家分享下。

源码仓库地址：[CatsAndMice/auto-script (github.com)](https://github.com/CatsAndMice/auto-script)



## 解析markdown文件获取数据

-   读取markdown文件，去除无用的开头内容


   ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d17007c606df433fb31859853b99350d~tplv-k3u1fbpfcp-watermark.image?)
```
const readMd = (path) => {
    let content = fs.readFileSync(path, { encoding: 'utf-8' });
    content = content.split('---');
    // 去除开头无用开头内容
    content.shift(0, 1);
    return content;
}
```
   markdown文件中每一段内容都是`—-`分隔，那就直接以它来分割文件内容为若干块，第一块为开头内容`content.shift(0, 1)`去除掉


-   使用[markdown-it](https://github.com/markdown-it/markdown-it)将markdown内容渲染成html内容，这个时候的html仅仅是字符串，[jsDom](https://github.com/jsdom/jsdom)将html字符串转化成Dom

```
const mdIt = require('markdown-it')();
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
//...
const parseMd = (md = '') => {
    const mdHtml = mdIt.render(md)
    const dom = new JSDOM(mdHtml)
    const { window } = dom
    return window
}
//...
```

完成markdown渲染成html字符串，html字符串转化成Dom后，直接把`window`这个变量返回出去即可。


-   引入jQuery操作Dom

```
const getMdMapValue = (mds = []) => {
    const mdMap = new Map();
    mds.forEach((md, index) => {
        const id = index + 1
        const window = parseMd(md)
        const $ = require('jquery')(window);
        //...
    })
    return Array.from(mdMap.values())
}
```

-   接下来，即使用`$` 针对性的获取Dom内容

```
const getMdMapValue = (mds = []) => {
    const mdMap = new Map();
    mds.forEach((md, index) => {
        const id = index + 1
        const window = parseMd(md)
        const $ = require('jquery')(window);
        
        //新增
        const answer = parseAnswer($('p'))
        const obj = { id, title: $('h6').text(), result: $('h4').text(), code: $('.language-javascript').text(), answer }
        // 如果选项解析失败，则抛弃该题目
        try {
            parseSelect($('ul>li'), (key, value) => {
                const option = { key, value }
                if (obj.options) {
                    obj.options.push(option)
                    return
                }
                obj.options = [option]
            })
            mdMap.set(id, obj)
        } catch (error) {
            console.warn('解析出错:', error)
        }
        
       
    })
    return Array.from(mdMap.values())
}
```
其他的逻辑就是将`<code>、<em>`等标签转化成`、** 等markdown符号相关边界性问题处理，不详细粘贴代码，读者可以查看源码

## 写个小爬虫

我选择爬取https://fabiaoqing.com/bqb/lists/type/hot.html 网站的表情图，逻辑非常简单，几十行搞定。

还是使用[jsDom](https://github.com/jsdom/jsdom)将请求响应的html文件内容转化为Dom，再使用jQuery操作。

`crawl.js`

```
const axios = require('axios');
const { JSDOM } = require('jsdom');
let $ = require('jquery');
const fs = require('fs');
const path = require('path');

(async () => {
    const { data } = await axios.get('https://fabiaoqing.com/bqb/lists/type/hot.html')
    const page = new JSDOM(data)
    const window = page.window
    $ = $(window)
    $('.bqppdiv').each(async (index, e) => {
        const src = $(e).find('.image')[0].getAttribute('data-original')
        const type = path.extname(src)
        const fileName = Date.now() + type
        const { data } = await axios.get(src, {responseType: 'stream'})
        const download = path.join(__dirname, fileName)
        data.pipe(fs.createWriteStream(download))
    })
})()
```

这里，我仅演示下爬虫不再深入，类似简单爬虫仅使用jquery、jsDom即可搞定，不需要学习其他复杂的爬虫工具。

## 总结

通过解析markdown文件将纯markdown文本解析成html字符串，又将html字符串转化成真实的Dom对象，再使用jQuery来获取Dom,达成markdown文件内信息转成JSON文件作为数据存储的目的，最后演示NodeJs操作Dom，并简单写一个爬虫做为练习。

如果我的文章对你有帮助，你的👍就是对我的最大支持^_^，另外欢迎大家关注《凌览社》，和我一起成长。

Node.js操作Dom ，轻松hold住简单爬虫

![image.png](http://112.124.1.74/static/img/66c6d67c8e5fbe8d7ac31607a7260ff2.image.png)
[玩转nodeJs文件模块](https://juejin.cn/post/7072972877628178440)

[50+行代码搞定一行命令更新Npm包](https://juejin.cn/post/7068969844607189029)

上列两篇文章介绍了作者在开发一个工具库中，拥抱NodeJs简化一些重复性工作的实践。

但还不够！！！还可以再简化。

![image_nsCut12YU1.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8a9d65f366941f78a98d8402f8f9953~tplv-k3u1fbpfcp-watermark.image?)

上图，从`isNaN.ts` 转成`isNaN.md`,在`/*...*/`写好注释直接生成该方法的文档介绍，这是我想要的。

类似[jsDoc](https://www.shouce.ren/api/view/a/13232)工具提供的功能。

其实，学习编程的过程就是学习造轮子的过程，咱也不重新造轮子，仿写一个最简单的功能即可。



## step1：前置构思

*   JavaScript注释一般有两种方式：单行注释、多行注释

    单行注释

    ```javascript
    //单行注释
    ```

    多行注释

    ```javascript
    /**
    *多行注释
    *
    */
    ```

    使用的是TypeScript语言，它是JavaScript的超集，注释方式与JavaScript完全是一样的。

    我们只考虑多行注释，忽略掉单行注释。

*   多行注释应该包含以下部分：

    *   方法的描述，具体做什么的

    *   使用者需要知晓该方法是哪个版本新增的

    *   调用方法需要传入的参数详情

    *   调用方法后，它返回的值

    *   使用该方法的具体示例代码

    多行注释时，需要规定**关键字段**用于表示上述部分的内容。

    规定：`@desc、@version、@param、@return、@example` 分别表示方法描述、该方法新增的版本、方法传入的参数详情、方法调用返回的值、示例代码。

## step2: 实现思路

*   提取代码文件中的多行注释

    代码文件不止一个，这边需要遍历获取`/src/xx/` 路径下所有的`.ts` 文件：

    ```typescript
    import { srcPath } from "../build/const"
    import getSrcLists from "../build/getSrcLists"

    (async () => {
        const lists = await getSrcLists(srcPath)
    })()
    ```

    `srcPath` 即为目录`src` 路径，` const srcPath = path.join(__dirname, '../src');` 一行代码得到`src`绝对路径。

    `getSrcLists` 方法用于获取`src`目录下所有的文件或文件夹:

    ```typescript
    import fsPromises from "fs/promises";
    export default async (examplePath: string) => {
        const dirs = await fsPromises.readdir(examplePath)
        const isIncludes = (dir: any[] | string) => dir.includes('.DS_Store')
        if (isIncludes(dirs)) {
            const index = dirs.findIndex((dir) => isIncludes(dir))
            dirs.splice(index, 1)
        }
        return dirs
    }
    ```

    调用NodeJS原生文件模块`fs/promises`下的`fsPromises.readdir(examplePath)`方法，即可获取到`examplePath`路径下所有的文件或文件夹。

    有坑小心，**MacBook系统**有文件夹下会自动生成`.DS_Store` 文件的问题，至于什么是`.DS_Store` 各位读者自己去寻找答案了。`.DS_Store`我们不需要，而且会导致拼接路径读取文件时报错，这里需要将其移除掉。

    `src`目录结构如下：
    ![image_YBBq7AXH1y.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b09ea01effab4814838df9b981a9472a~tplv-k3u1fbpfcp-watermark.image?)
    ```bash
    /src
      /Array
        /customKey.ts
        /getMax.ts
        /...
      /Date
        /isDate.ts
        /...
      /...
    ```
    想获取`.ts`文件，即路径上还需要再拼接一个文件夹名，再次调用`getSrcLists`方法：

    ```typescript
    import { srcPath } from "../build/const"
    import getSrcLists from "../build/getSrcLists"
    import path from "path"
    (async () => {
        const lists = await getSrcLists(srcPath)
        lists.forEach(async list => {
            const filePath = path.resolve(srcPath, list)
            const files = await getSrcLists(filePath)
        })
    })()
    ```

    接下来，重复调用`path.resolve(filePath, file)`路径再拼接上`xxx.ts`文件名，即为完整的`xxx.ts`  路径：

    ```typescript
    import { srcPath } from "../build/const"
    import getSrcLists from "../build/getSrcLists"
    import path from "path"
    (async () => {
        const lists = await getSrcLists(srcPath)
        lists.forEach(async list => {
            const filePath = path.resolve(srcPath, list)
            const files = await getSrcLists(filePath)
            files.forEach(async file => {
                const srcFilePath = path.resolve(filePath, file)
                const content = await fsPromises.readFile(srcFilePath, 'utf-8')
            })
        })
    })()
    ```

    最后终于可以`fsPromises.readFile(srcFilePath, 'utf-8')` 把拼接完整路径的`xxx.ts`文件内容读取出来。

    每一个`xxx.ts` 文件可能导出不止一个方法，例如：
    ![image_ZY-D3nIY1F.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1d74ab1fb9c4f1fa80df904f252640c~tplv-k3u1fbpfcp-watermark.image?)

    对于这种情况，我们依然往对应的`.md`文件内叠加内容。

    针对上述问题，需要把每一个`xxx.ts`文件中的每一个**多行注释块**提取单独处理。

    TypeScript使用的是ES6模块化，`import ... from "..."` 导入，`export` 关键字导出。每一个导出的方法必须使用`export`，这个是不变的。如此针对读取`xxx.ts`内容后，以`export`分割内容，即可把每个`xxx.ts`文件内的每一个多行注释块分离出来：

    ```typescript
    import { srcPath } from "../build/const"
    import getSrcLists from "../build/getSrcLists"
    import path from "path"

    (async () => {
        const lists = await getSrcLists(srcPath)
        lists.forEach(async list => {
            const filePath = path.resolve(srcPath, list)
            const files = await getSrcLists(filePath)
            files.forEach(async file => {
                const srcFilePath = path.resolve(filePath, file)
                const content = await fsPromises.readFile(srcFilePath, 'utf-8')
                //新增
                const exportsArray = content.split('export')
            })
        })
    })()

    ```

    为方便下一步提取多行注释中的关键字段，要做的是把多行注释干净的提取出来，不需要有任何其他代码片段，正则`exec`这个时候就能派上用场：

    ```typescript
    import { srcPath } from "../build/const"
    import getSrcLists from "../build/getSrcLists"
    import path from "path"
    import { ANNOTATION } from "./const"

    //新增
    function getAnnotation(content: string) {
        const execContent = ANNOTATION.exec(content)
        if (isEmpty(execContent)) return
        const comment = (execContent as any[])[0]
        return comment
    }

    (async () => {
        const lists = await getSrcLists(srcPath)
        lists.forEach(async list => {
            const filePath = path.resolve(srcPath, list)
            const files = await getSrcLists(filePath)
            files.forEach(async file => {
                const srcFilePath = path.resolve(filePath, file)
                const content = await fsPromises.readFile(srcFilePath, 'utf-8')
                const exportsArray = content.split('export')
                //新增
                const promises: any[] = []
                exportsArray.forEach(exportsContent => {
                    if (isEmpty(exportsContent)) return
                    promises.push(Promise.resolve().then(() => getAnnotation(exportsContent)))
                })
            })
        })
    })()
    ```

    其中`ANNOTATION` 值即为正则`/\/\*(\s|.)*?\*\//`

*   提取多行注释中的关键字段

    通过上面步骤，我们就可以完整的获取到干净的多行注释，现在要获取多行注释中的关键字段，如`@desc` 。

    多行注释是以`/**`开头，`*/`结束，它们对于我们来说是多余字符，所以在获取关键字段前，我们先将其处理掉。

    ```typescript
    //省略
    import { ANNOTATION, CHAR } from "./const"

    //新增
    function getQuery(comment: string) {
        comment = comment.replace(/\*\/$/, '')//  */替换成""
        let splitComment = comment.split(CHAR)
        splitComment = splitComment.slice(1, splitComment.length).map(val => (CHAR + val.replace(/((\* $)|(\* ))/gm, '')).trim())
        return splitComment
    }

    function getAnnotation(content: string) {
        const execContent = ANNOTATION.exec(content)
        if (isEmpty(execContent)) return
        const comment = (execContent as any[])[0]
        return getQuery(comment)
    }

    //省略
    ```

    `CHAR` 常量值为`@`，关键字段均是以`@` 开头定义，所以用`@`再次分割内容，将内容分割多个部分，分割后数据清理`/**`。这是多行注释的开头，分割后索引为`0`，将其剔除`splitComment.slice(1, splitComment.length)`，保留的数据由于只对`@、/**、*/`做了处理，所以现有数据头部存在`*` 特殊字符。

    `(CHAR + val.replace(/((\* $)|(\* ))/gm, '')).trim()` 这行它做了三件事：替换`*`为""、去除字符串两端空字符、重新将`@`拼接。

*   整理关键字段内容，以合适的数据结构存储

    这个时候，`splitComment` 变量值即存储了所有的关键字段内容，数据结构为：

    ```javascript
    ["@desc 判断参数是否为`NaN`","@version v3.3.5",...]
    ```

    这样的数据结构并不方便取值，所以要把现在的数据结构转变下。

    ```typescript
    //省略

    //新增
    function cacheMap(comments: string[]) {
        const map = new Map<string, Set<string>>()
        const reg = /^@([a-z]*) /
        comments.forEach((comment) => {
            const regComment = reg.exec(comment)
            if (isEmpty(regComment)) return
            const readyComment = comment.replace(reg, '')
            const key = (((regComment as any[])[0]) as string).trim().replace(CHAR, '')
            const mapValue = map.get(key)
            if (mapValue) {
                mapValue.add(readyComment)
                return
            }
            const set = new Set<string>()
            set.add(readyComment)
            map.set(key, set)
        })

        return map
    }

    function getQuery(comment: string) {
        comment = comment.replace(/\*\/$/, '')
        let splitComment = comment.split(CHAR)
        splitComment = splitComment.slice(1, splitComment.length).map(val => (CHAR + val.replace(/((\* $)|(\* ))/gm, '')).trim())
        return cacheMap(splitComment)
    }

    //省略
    ```

    依然是使用正则`const reg = /^@([a-z]*) /`，在遍历`comments`数组时，将`@desc `等关键字段捕获。如``"@desc 判断参数是否为`NaN`"`` 捕获出`"@desc "`，并在原字符串上将其替换成`""`，原字符串变成``"判断参数是否为`NaN`"``。

    捕获出的`"@desc "`再去除掉`@`、去除掉两端空字符，把`desc` 作为**Map**对象的Key值；原字符串``"判断参数是否为`NaN`"``作为**Set**对象的Value值；将该**Set**对象作为**Map**对象中Key值为`desc`的Value。

    使用**Set**对象的原因：支持多个相同关键字段

    ```javascript
    /**
     * ...
     * @param value(any):参数1
     * @param value(any):参数2
     * ...
     */
    ```

    如上注释，多个`@param` 描述参数，实际中多个参数是正常的，因此我们要做的是获取多个相同关键字段内容时去重，去重使用**Set**对象是最方便的。

    经过`cacheMap` 方法处理后，最终的数据结构为：

    ```bash
    Map:{
      desc:Set["判断参数是否为`NaN`"],
      version: Set["v3.3.5"],
      ...
    }
    ```

*   提前定好文档模板，对应位置填写入关键字段内容

    template.ts:

    ```typescript
    //省略

    export const generateDocs = async (doc: docs, callBack: () => string) => {
        const filePath = callBack()
        const splitFilePath = filePath.split(path.sep)
        const file = splitFilePath[splitFilePath.length - 1]
        if (or(isEmptyObj(doc), isEmpty(doc.version))) {
            err(`请完善${file}文档`)
            process.exit(1);
        }
        return `${doc.desc ? getSetValue(doc.desc) : ''}  
    **添加版本**  
    ${getSetValue(doc.version)}
    **参数**   
    ${doc.param ? getSetValue(doc.param) : ''}
    **返回**  
    ${doc.return ? getSetValue(doc.return) : ''}
    **例子**  
    ${doc.example ? getExample(getSetValue(doc.example)) : await generateExample(filePath)}`
    }
    ```

    仅粘贴核心部分，其中该部分很容易理解。`doc` 为对象，由Map对象转化成Object对象，然后判断`param、return` 等字段是否存在，存在则将字段值传递给`getSetValue` 方法。

    ```typescript
    function getSetValue(set: Set<string>) {
        let setValue = ''
        set.forEach((s) => {
            setValue += `${s}  \n`
        })
        return setValue
    }
    ```

    其他逻辑是处理一些边界。

    完整代码：[medash/template.ts at dev · CatsAndMice/medash (github.com)](https://github.com/CatsAndMice/medash/blob/dev/buildDocs/template.ts "medash/template.ts at dev · CatsAndMice/medash (github.com)")

*   最后创建`.md`文件，写入内容

    ```typescript
    (async () => {
        const lists = await getSrcLists(srcPath)
        lists.forEach(async list => {
            const filePath = path.resolve(srcPath, list)
            const files = await getSrcLists(filePath)
            files.forEach(async file => {
              //省略
              
                const promises: any[] = []
                exportsArray.forEach(exportsContent => {
                    if (isEmpty(exportsContent)) return
                    promises.push(Promise.resolve().then(() => getAnnotation(exportsContent)))
                })
                
                let docsContent = ''
                Promise.all(promises).then(async (result) => {
                    const docsPromises: any[] = []
                    result.forEach((res) => {
                        //拼接字符串
                        const promiseFn = async () => {
                            const isMapNoSize = isMap(res) && isEmpty(res.size)
                            if (or(isEmpty(res), isMapNoSize)) return
                            const docs = await generateDocs((mapToObj(res as Map<string, Set<string>>)) as docs, () => getLastPath(srcFilePath))
                            if (isEmpty(docs)) return
                            docsContent += `${docs}  \n`
                            return docsContent
                        }
                        //Promise类型统一添加至数组中
                        docsPromises.push(promiseFn())
                    })
                })
            })
        })
    })()
    ```

    ` Promise.all(promises)` 等待所有的`Promise`结束后，我们再遍历所有Promise返回的结果，将生成的内容逻辑代码，使用`async`函数`promiseFn`包裹，执行`promiseFn()`并`push`至`docsPromises`数组。

    同样的逻辑，还是使用` Promise.all`，等待`docsPromises`数组中所有的Promise对象出结果后，说明所有生成的内容已拼接赋值于`docsContent` 变量：

    ```typescript
    (async () => {
        const lists = await getSrcLists(srcPath)
        lists.forEach(async list => {
            const filePath = path.resolve(srcPath, list)
            const files = await getSrcLists(filePath)
            files.forEach(async file => {
              //省略
                        
                let docsContent = ''
                Promise.all(promises).then(async (result) => {
                    const docsPromises: any[] = []
                    result.forEach((res) => {
                        //拼接字符串
                        const promiseFn = async () => {
                            const isMapNoSize = isMap(res) && isEmpty(res.size)
                            if (or(isEmpty(res), isMapNoSize)) return
                            const docs = await generateDocs((mapToObj(res as Map<string, Set<string>>)) as docs, () => getLastPath(srcFilePath))
                            if (isEmpty(docs)) return
                            docsContent += `${docs}  \n`
                            return docsContent
                        }
                        //Promise类型统一添加至数组中
                        docsPromises.push(promiseFn())
                    })
                    
                    //新增
                    //所有的Promise完成后，docsContent已拼接完成
                    Promise.all(docsPromises).then(() => {
                        const splitFilePath = filePath.split(path.sep)
                        const mdPath = path.join(docsPath, splitFilePath[splitFilePath.length - 1])
                        
                        isEmpty(docsContent) ? null : createDocs(mdPath, file.replace(/\.[a-z]*$/, ''), docsContent)
                    })
                    
                })
            })
        })
    })()
    ```

    `createDocs` 就是一个创建、写入内容的方法逻辑，相对容易不进行粘贴了。

至此，一个最简单的文档生成功能就完成了。

完整代码：[medash/index.ts at dev · CatsAndMice/medash (github.com)](https://github.com/CatsAndMice/medash/blob/dev/buildDocs/index.ts "medash/index.ts at dev · CatsAndMice/medash (github.com)")

## 最后

原创不易！如果我的文章对你有帮助，你的👍就是对我的最大支持^_^。

点赞+评论+收藏 = 学会了。

仿jsDoc写一个最简单的文档生成

![image.png](http://112.124.1.74/static/img/43cb48bfc93664b4b93848d1cc5a163b.image.png)

上篇[50+行代码搞定一行命令更新Npm包 - 掘金 (juejin.cn)](https://juejin.cn/post/7068969844607189029)介绍了自动化push仓库&&自动化更新版本等功能的实现。这篇说说自动生成模板文件、[rollup](https://www.rollupjs.com/)按需加载打包配置以及自动生成目录列表，简单得不像话！



## 按需加载打包配置

> 按需加载听起来高大上，但本质就是将不同的模块功能文件分开打包成多个文件，而不是全部打包成一个主文件。


首先创建一个`rollup.config.js` 文件，然后下载需要的插件，创建文件`pluginsCommon.js` 用于配置共同的插件，相关代码如下: 

```JavaScript
const { getBabelOutputPlugin } = require('@rollup/plugin-babel')
//用于将typescript编译成javascript
const typescript = require('rollup-plugin-typescript2')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('@rollup/plugin-commonjs')
//用于压缩
const { terser } = require("rollup-plugin-terser")
module.exports = [
    typescript(),
    commonjs(),
    resolve(),
    getBabelOutputPlugin({
        presets: ['@babel/preset-env'],
        allowAllFormats: true,
    }),
    terser()
]
```


不了解的插件，请Google。

> rollup打包运行环境是nodeJs，遵循commonJS的规范。


rollup提供了很多种打包格式[rollup打包格式 ](https://www.rollupjs.com/guide/big-list-of-options)，我需要的是一个用于做CDN加速的`medash.min.js`文件格式为`umd`以及按需加载的若干`cjs` 格式文件。

> 不了解`umd、cjs`的读者，请查阅[rollup打包格式 ](https://www.rollupjs.com/guide/big-list-of-options)。


`medash.min.js` 文件容易得到，只需要设置打包入口文件，入口文件为`main.ts` ，向`rollup.config.js` 中添加如下内容即可：

```JavaScript
//...
const pluginsCommon = require('./pluginsCommon')

export default [
//...
 {
    input: "./main.ts",
    output: [
        {
            file: 'dist/medash.min.js',
            name: 'medash',
            format: 'umd'
        }
    ],
    plugins: pluginsCommon
}];
```


按需加载打包配置稍微麻烦点，我需要获取所有需要按需打包的文件路径。一个文件一个文件的手动写入相当麻烦，为此我创建一个`build.js`文件用于自动获取打包文件的路径。

我定义了一个变量名`buildInputs` 的数组，用于存储所有的文件路径，所有需要打包的文件均存于`src` 目录下。

思路: 获取`src`目录下所有的文件或文件夹，逐一进行遍历。若文件类型为`ts` 时，获取该文件的相对路径`push` 到`buildInputs`数组中；若文件类型是一个文件夹时，获取该文件夹下的文件目录，重复上一步操作。

实现上述需要使用nodeJs fs模块以及path模块，先进行导入：

```JavaScript
const fs = require('fs');
const Path = require('path');
```


`fs.readdirSync(path)`获取文件夹目录文件: 

```JavaScript
//...
function getFileNames(befter, after) {
    let filesPath = Path.join(befter, after)
    return { files: fs.readdirSync(filesPath), path: filesPath };
}
//...
```


获取文件相对路径并`push` 至`buildInputs` 数组：

```JavaScript
//...
function setBuildInputs(tsFile) {
    let filePath = tsFile.split('src')[1]
    buildInputs.push('./src' + filePath.replace(/\\/g, "/"))
}
//...
```


`Path.extname(childrenPath)`获取文件后缀名，针对不同的后缀名做不同的逻辑处理：

```JavaScript
//...
function startBuild({ files, path }) {
    if (files.length === 0) {
        return;
    }
    files.forEach((file) => {
        let childrenPath = Path.join(path, file);
        let isExtname = Path.extname(childrenPath);
        if (isExtname === '.ts') {
            setBuildInputs(childrenPath);
        } else if (isExtname === '.js') {
            return;
        } else {
            startBuild(getFileNames(path, file));
        }
    })
}
startBuild(getFileNames(__dirname, '../src'));
//...
```


> `src` 目录下残留一些`.js` 文件，选择性跳过。


效果演示：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab55bf235974fe099e50cce62d55dba~tplv-k3u1fbpfcp-zoom-1.image "")

源码地址：[https://github.com/CatsAndMice/medash/blob/dev/rollup.config.js](https://github.com/CatsAndMice/medash/blob/dev/rollup.config.js)

## 自动生成模板文件

### 能帮我解决什么问题

1. 每次想增加一个方法文件时，我需要创建四个文件，分别是`src`文件下的`xxx.ts`、测试`test`文件夹下的`xxx.test.ts`、文档`docs`文件夹下的`xxx.md` 以及`example`文件下的`xxx.ts`,我想要自动进行创建；
2. 增加的方法，需要在`xxx.test.ts`、案例`xxx.ts` 导入以及`main.ts` 文件中导入导出步骤，我想要自动完成这一步的操作。

### 开撸

[50+行代码搞定一行命令更新Npm包 - 掘金 (juejin.cn)](https://juejin.cn/post/7068969844607189029)中，提及到了[inquirer ](https://link.juejin.cn/?target=https://www.npmjs.com/package/inquirer)。同样的，实现自动生成模板文件也从终端交互入手。

先在`build`文件夹下，创建一个`create.ts` 文件。

我想增加一个方法时，终端应该提供一个目录选择，以便将增加的文件创建在对应的目录下，当我选择对应的目录后终端提供一个类似输入框的功能，用于给文件命名。

目录选择代码：

```TypeScript
/...
import getSrcLists from "./getSrcLists";
//...
async function typesCheck() {
    const lists = await getSrcLists();
    inquirer.prompt([
        {
            name: 'list',
            type: 'list',
            message: '请选择对应的文件夹',
            choices: lists,
            default: [lists[0]]
        }
    ]).then(({ list }) => {
        getName(list)
    })
}
//...
```


其中`getSrcLists` 方法作用是获取`src` 下的文件夹名称，用于进行目录选择。`import fs from "fs/promises";` 导出的`fs/promises` 模块与`import fs from "fs";` 导出的`fs`模块，区别在于`fs`模块API采用的是回调，而`fs/promises` 模块的API支持`Promise` ,开发者使用更方便。

```TypeScript
import fs from "fs/promises";
import { srcPath } from "./const";
export default async () => {
    const dirLists = await fs.readdir(srcPath);
    return dirLists;
}
```


`srcPath` 其实就是一个绝对路径，`const.ts` 文件下就一行代码搞定。

```TypeScript
import path from 'path';
//...
export const srcPath = path.join(__dirname, '../src');

```


创建文件命名功能是`getName(list)` 方法，参数`list` 是用户选择的目录。

```TypeScript
//...
async function getName(fileName: string) {
    //...
    let { input } = await inquirer.prompt([
        {
            name: 'input',
            type: 'input',
            message: '请为创建的文件命名:',
        }
    ])
    if (isEmpty(input)) {
        err('error:创建文件未命名');
        return
    }
    const { isSpecialChar } = specialChar(input);
    const { isCh } = ch(input);
    if (isSpecialChar) {
        err('error:文件名含有特殊字符!');
        return
    }

    if (isCh) {
        err('error:文件名含有中文!');
        return
    }
    //...
}

```


命名校验: 

- 不能含有特殊字符；
- 不能使用中文。

效果演示：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15d61f585615418fbf3b65155d94d7b7~tplv-k3u1fbpfcp-zoom-1.image "")

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33298168668e45229775f92633fa4db3~tplv-k3u1fbpfcp-zoom-1.image "")

文件命名后，接下来就是创建对应的文件：

```TypeScript
import path from "path";
import { testPath, srcPath, docsPath, examplePath, err } from './const';
//...
async function getName(fileName: string) {
    const createPath = path.join(srcPath, fileName);
    const createDocsPath = path.join(docsPath, fileName);
    const createTestPathPath = path.join(testPath, fileName);
    const createExamplePath = path.join(examplePath, fileName)
    //...
    createTestFile(createTestPathPath, input)
    createFile(createPath, input);
    createDocs(createDocsPath, input);
    createExample(createExamplePath, input);
   //...
}
//...
```


`createPath、createTestPathPath、createDocsPath 、createExamplePath ` 这四个变量分别是`src`文件下`xxx.ts`、测试`test`文件夹下`xxx.test.ts`、文档`docs`文件夹下`xxx.md` 以及`example`文件夹下`xxx.ts`的路径。

```TypeScript
import path from 'path';
//...
export const srcPath = path.join(__dirname, '../src');
export const testPath = path.join(__dirname, '../test');
export const docsPath = path.join(__dirname, '../docs/v3');
export const examplePath = path.join(__dirname, '../example');
//...
```


方法`createTestFile、createFile、createDocs、createExample` 逻辑类似，区别是创建的文件后缀名以及写入的内容。

创建`createAndWrite.ts` 文件，用于抽离公共的创建文件夹与创建文件并写入的功能：

```TypeScript
import fs from "fs";
import path from 'path';
import { err } from "./const";
export function create(createPath: string, suffixName: string) {
    !fs.existsSync(createPath) && fs.mkdirSync(createPath);
    return path.join(createPath, suffixName)
}
export function write(createPath: string, context: string, callBack = () => { }) {
    if (fs.existsSync(createPath)) {
        err(createPath + '文件已存在!')
        return;
    }
    fs.writeFile(createPath, context, (error) => {
        if (error) {
            err(createPath + '文件创建失败!')
            return;
        }
        callBack();
    })
}
```


`create` 方法用于创建文件夹，`write` 方法用于创建文件并写入内容。

 `createTestFile、createFile、createDocs、createExample` 逻辑是类似的，所以这里只把 `createFile`文件粘贴出来：

```TypeScript
import { srcContext } from './const';
import { write, create } from './createAndWrite';
export default (createPath: string, name: string) => {
    const suffixName = name + '.ts';
    createPath = create(createPath, suffixName);
    write(createPath, srcContext())
}
```


`createTestFile、createFile、createDocs、createExample` 文件中会改变的变量`const suffixName = name + '.ts';` ，还有就是`srcContext` 。

`'.ts'` 表示文件的后缀名，需要创建的文件后缀名有`.md、.test.ts、.ts` ; `srcContext` 是写入文件的内容函数，不同的文件写入的内容不同，而`createTestFile、createFile、createDocs、createExample` 中获取写入内容的函数名不同。

写入文件的内容是提前定义在`consts.ts` 文件中，这里代码就不粘贴了，感兴趣的读者请点击下面的源码地址。

源码地址：[https://github.com/CatsAndMice/medash/blob/dev/build/const.ts](https://github.com/CatsAndMice/medash/blob/dev/build/const.ts)

整体的代码目录：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf1d8efb2d2a42259cf8e2d8cca97b02~tplv-k3u1fbpfcp-zoom-1.image "")

源码地址：[https://github.com/CatsAndMice/medash/tree/dev/build](https://github.com/CatsAndMice/medash/tree/dev/build)

最后，解决新增方法自动导入`main.ts` 还有导出问题 。

同样的，我在`create.ts`文件中往`getName` 方法内添加一个`addMainContext`方法： 

```TypeScript
import path from "path";
//...
import addMainContext from './addMainContext';
//...

async function getName(fileName: string) {
    const createPath = path.join(srcPath, fileName);
   //...
    createExample(createExamplePath, input);
    addMainContext(createPath, input);
}
//...
```


`addMainContext` 文件中，代码逻辑为先读取`main.ts`内容，然后进行内容分段，判断是否已重复来决定是否添加该新的方法，最后再重新写入`main.ts`。

先看下`main.ts` 内容：

```TypeScript
//...
import toArray from "./src/Array/toArray";
import ch from "./src/RegExp/ch";
export {
    ch,
    toArray,
    or,
    chain,
    composePromise
    //...
 }
 export default {
    ch,
    toArray,
    or,
    chain,
    composePromise
    //...
 }
```


它存在两种导出方式，导出方式均以`export` 关键字开头，所以读取main.ts内容后以`export`进行分割,把内容分成三部分存放至一个数组中。

```TypeScript
import fs from "fs";
//...
export default (path: string, name: string) => {
    filePath = path
    fs.readFile('./main.ts', 'utf-8', (readError, data) => {
        if (readError) {
            console.error(readError);
            return;
        }
        let context = addContext(data.split('export'), name);
        context ? writeFile(context) : null
    })
}

```


第一部分是`import` 导入文件，第二、三部分都是导出。导入内容部分用于判断是否为重复导入，导出部分以`{` 再次分割，分割完成后再把新增方法名重新拼接。

```TypeScript
const getFilePath = function (filePath: string, name: string) {
    let afterPath = filePath.split('src')[1];
    afterPath = afterPath.replace('\\', '/');
    return './src' + afterPath + '/' + name;
}
const addContext = (args: string[], name: string) => {
    let importsHeader = `import ${name} from "${getFilePath(filePath, name)}";\r\n`;
    if (args[0].includes(importsHeader)) {
        err(name + '已导入!');
        return
    }
    let imports = args[0] + importsHeader;
    let contexts = args[1].split('{');
    let ctx = contexts[0] + `{\r\n${name},` + contexts[1];
    let dafaultContexts = args[2].split('{')
    let ctxs = dafaultContexts[0] + `{\r\n${name},` + dafaultContexts[1];
    return [imports, ctx, ctxs].join('export');
}
```


最后，再将内容写入`main.ts` 。   

```TypeScript
const writeFile = (context: string) => {
    fs.writeFile('./main.ts', context, (error) => {
        console.error(error);
    })
}
export default (path: string, name: string) => {
    filePath = path
    fs.readFile('./main.ts', 'utf-8', (readError, data) => {
        if (readError) {
            console.error(readError);
            return;
        }
        let context = addContext(data.split('export'), name);
        context ? writeFile(context) : null
    })
}

```


效果演示：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/acc895cd51414e9595c897f45a887559~tplv-k3u1fbpfcp-zoom-1.image "")

源码地址：[https://github.com/CatsAndMice/medash/blob/dev/build/addMainContext.ts](https://github.com/CatsAndMice/medash/blob/dev/build/addMainContext.ts)

## 自动生成目录列表

> 这里我使用一个文档网站生成器[docsify](https://docsify.js.org/#/zh-cn/quickstart) ，用于部署文档。


### 能帮我解决什么问题

- 所有的文档都放于`docs/v3`文件夹下，docsify生成文档网站，前提是要把文档文件路径以`[xxx](相对路径)` 的格式收录至`_sidebar.md` 文件中，一个一个的手动写入太麻烦，我想要自动进行录入。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/816fa00cca0544289998fcad96fbaff8~tplv-k3u1fbpfcp-zoom-1.image "")

录入后，运行docsify可以得到一个在线文档网站链接了。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15ea9b8887f3493abd8f64199f29954c~tplv-k3u1fbpfcp-zoom-1.image "")

### 开撸

在**自动生成模板文件**一节中，有提及到一个`createDocs` 方法，它用于创建`.md`文件并写入内容。自动生成目录实现从它这里入手。

先展示下它所处的目录: 

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d1d942c43b0458595348c3172520965~tplv-k3u1fbpfcp-zoom-1.image "")

从上图中注释，可以看出创建目录的入口为`readDir`函数，该函数作为参数被传递到`write`方法，这样做的目的是`.md` 创建后才执行`readDir`更新目录。

获取文件夹目录，逐一遍历创建异步函数去拼接`[xxx](相对路径)` ，并将异步函数添加至`promises`数组。

```TypeScript
//创建目录
const readDir = async () => {
    let content = '* [快速开始](readme.md)\n';
    const dirs = await fsPromises.readdir(docsPath);
    const promises: any[] = [];
    dirs.forEach((dir) => {
        const promise = new Promise(async (resolve) => {
            const filePath = path.join(docsPath, dir);
            fsPromises.readdir(filePath).then(files => {
                content += getContent(dir, files);
                resolve(content);
            })
        })
        promises.push(promise);
    })
    //闭包,方便获取content的值
    allPromisesFinish(promises, () => content);
}

```


` content += getContent(dir, files);` `getContent` 用于排序并拼接内容格式，拼接好的格式再与变量`content`拼接。

```TypeScript
const getContent = (dir, files) => {
    let text = `* ${dir}\n`;
    files.sort((a, b) => a - b);
    for (const file of files) {
        text += `  * [${file.split('.')[0]}](v3/${dir}/${file})\n`;
    }
    return text;
}
```


`promises`数组中所有的异步函数出结果后，将会执行`() => { writeContent(content());}` 写入内容至`_sidebar.md`。

```TypeScript
const writeContent = (content) => {
    const writeFilePath = path.join(__dirname, '../docs/_sidebar.md');
    fsPromises.writeFile(writeFilePath, content);
}

//全部的Promise状态完成后才进行文件写入
const allPromisesFinish = (promises, content) => {
    Promise.all(promises).then(() => {
        writeContent(content());
    })
}

```


一个简简单单的目录生成功能就完成了。

效果演示：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4fde8ce6f6794a2395031bbea791fe17~tplv-k3u1fbpfcp-zoom-1.image "")

源码地址：[https://github.com/CatsAndMice/medash/blob/dev/build/createDocs.ts](https://github.com/CatsAndMice/medash/blob/dev/build/createDocs.ts)

## 最后

文章介绍了作者使用nodeJs解决一些重复性的操作，也算是对nodeJs文件模块的一种刻意练习。

码字不易！如果我的文章对你有帮助，你的👍就是对我的最大支持^_^。

玩转nodeJs文件模块

![封面2.jpeg](http://112.124.1.74/static/img/35d5c12b29e9abb8d9d768249034c509.%E5%B0%81%E9%9D%A22.jpeg)
## 📖阅读本文，您将收获

- 工作中如何使用 Git回退到某一个历史提交记录
- `git reset`与`git revert`两者的区别



## 预设场景

> 我们先假设一个理想的场景，

- 某公司有A、B两位员工共同维护一个项目
- 现在A、B都向Git源仓库提交过代码，A、B提交的历史记录如下：
    
    A员工提交：A员工: 您好！
    
    提交的内容变动: 
    
    * 创建一个`index.js`文件，并且写入`console.log('A员工：您好！');`
    
    ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1af29aebc9e4fffb056956a4c29f7bc~tplv-k3u1fbpfcp-zoom-1.image)
    B员工提交：B员工:点赞
    
    提交内容变动：
    * 删除了`index.js`文件中`console.log('A员工：您好！');`这一行代码，并且写入`console.log('B员工：点赞')`
    * 创建`main.js`文件，写入`console.log('B员工：您好！');`
     
   ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c088c7737c74d24867c460f8341dd63~tplv-k3u1fbpfcp-zoom-1.image)
   
   A员工再次提交：B员工:瞎改，我锤你哦
   
   提交内容变动：
   * `main.js`文件中添加一行`console.log('A员工：动我代码，我跟你拼命');`
   
   ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e678c586e964d7189d4b3ab76aa4e07~tplv-k3u1fbpfcp-zoom-1.image)
        A、B员工Git历史提交顺序：

    ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90adb817c1c546dfb52786801230fa45~tplv-k3u1fbpfcp-zoom-1.image)
- 问题：B员工因删了A员工的代码，被A员工怼了一顿；现在A员工想自己找回被B员工删除的代码，该什么做呢？

## 解决A员工问题

解决A员工的问题有两种方法：`git reset`、`git revert`，它们都能达到回退至某个历史git提交记录目的。

### `git revert`

现在把git历史记录回退到A员工提交的"A员工:您好！"，复制commit记录唯一值。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/798571df14b74c12b63687564279b3ca~tplv-k3u1fbpfcp-zoom-1.image)

执行`git revert commit-id`

```Bash
git revert 65ddd52968631b718021fdb2abd9f423cb71ce2d
```

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/039ff143986848ecbb1fbaddd497dd10~tplv-k3u1fbpfcp-zoom-1.image)

解决冲突后，重新`git add 、git commit、git push`提交至远程仓库即可。

使用`git revert`相当于增加一个`git commit`，它依旧会保留以前的历史记录。

### `git reset`

相同的，我们把git历史记录回退到A员工提交的"A员工:您好！"，此时与`git revert`稍有不同；需要使用提交记录"A员工:你好！"的commit id。将git 历史记录"A员工:你好！"之后提交的所有记录回退。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fe54e478dde4370b0bf0a614255d0b2~tplv-k3u1fbpfcp-zoom-1.image)

回退后，本地代码与远程仓库不同步；因此在推送远程需要**强制推送**`git push ... -f`,强行覆盖远程仓库。

### `git revert`与`git revert`的区别

- `git revert`、`git reset`都能完成Git 记录回退代码的目的
- `git revert`相当于新增一条Git记录，不会消除已存在的记录
- `git reset` 会消除存在的记录，并且`push` 至远程需要强制推送；多人协同时，在回退期间并不能保证其他人有没有提交过代码，所以强制推送是有风险的，它容易覆盖掉其他人提交的代码

# 总结

使用`git revert、git reset`都能帮助我们回退历史记录，但`git reset`需要进行强制推送至远程，有风险。工作中更推荐使用`git revert`命令。

另外，如果文章内容对您有所帮助，帮我**点赞+评论+关注**就是对我的最大的支持❤️