![封面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`命令。

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

【Git】有人瞎动你代码怎么办？学会git reset、 revert轻松解决！

![image.png](http://112.124.1.74/static/img/a848ca0fa6032301b662a2efb86efd6e.image.png)
> 文章已收录:https://github.com/CatsAndMice/Blog

公司需求拍摄视频上传，拍摄的视频体积大，上传常常因超时，导致上传失败。对此视频文件上传前，需要对文件进行一定的处理，实践中选择了ffmpem进行操作，本文目的是将ffmpem个人踩坑经验分享给大家



### ffmpeg视频压缩转码

上传视频将存储于[阿里云oss]([对象存储OSS_云存储服务_企业数据管理_存储-阿里云 (aliyun.com)](https://www.aliyun.com/product/oss/))，如果将视频压缩成压缩包上传，服务器端需要将上传成功的压缩包进行解压，第三方服务器并没有提供类似方案，这样客户端播放视频要将线上压缩包下载后进行解缩再播放，一来二去肯定会花费时间与性能，用户体验不友好，压缩成压缩包上传肯定是不能的。

移动端拍摄的视频格式一般为mp4或mov, 能不能将视频转化成其他体积相对更小的视频格式呢？思路可行，一顿Chrome找到了[专业视频处理库ffmpeg.js]([Kagami/ffmpeg.js: Port of FFmpeg with Emscripten (github.com)](https://github.com/Kagami/ffmpeg.js)),ffmpeg纯`C,C++`语言编写。

非`javaScpit`语言为什么能在浏览器环境中运行，不在本文中介绍。

有兴趣者，请阅读[WebAssembly]([WebAssembly概念 - WebAssembly | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts))

![](https://i.bmp.ovh/imgs/2021/10/39abc5f97fc95e34.png)

ffmpeg压缩视频使用就简单的几行代码，复制粘贴完事。

然而简单的几行代码，运行却报错😂

![](https://i.bmp.ovh/imgs/2021/10/2f58b3e6af88dbc2.png)

查阅[仓库issues#231]([SharedArrayBuffer is not defined in chrome 92 · Issue #231 · ffmpegwasm/ffmpeg.wasm (github.com)](https://github.com/ffmpegwasm/ffmpeg.wasm))，发现问题是chrome92版本发布限制了`SharedArrayBuffer`使用

#### 解决SharedArrayBuffer报错

##### 1. SharedArrayBuffer 降级 ArrayBuffer

```js
if(!crossOriginIsolated) {
  SharedArrayBuffer = ArrayBuffer;
}
```

缺点: 可以影响功能

ffmpeg.js运行失败

![](https://i.bmp.ovh/imgs/2021/10/663e0b0b24cbe099.png)

##### 2. 设置响应COOP和COEP状况

```js
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

缺点: 影响加载跨域资源，如iframe,script标签加载等

服务端响应头添加字段：

![](https://i.bmp.ovh/imgs/2021/10/b84e86dc9671820e.png)

成功运行，然而视频压缩时间较长

![](https://i.bmp.ovh/imgs/2021/10/2e0aa1b6ce17da6f.gif)

并且iframe资源无法进行加载

![](https://i.bmp.ovh/imgs/2021/10/b18cb29666dd55bb.png)

### 总结 

ffmpeg转码压缩视频时间长，并且需要设置`COOP`和`COEP`,影响到iframe,script标签等跨域资源加载。在用户上传视频场景下不适合使用ffmpeg

> ffmpeg使用详细代码获取:https://github.com/CatsAndMice/upfile/tree/master/ffmpeg

### 参考

[解决 SharedArrayBuffer is not defined - 掘金 (juejin.cn)](https://juejin.cn/post/7016962394479919118)