平时逛 Github 或者 NPM 网站时候，在 README.md 中或多或少都会看到一些这样的图标：

在枯燥的文档中加入这样的图标能让文档的观感提升不少，且可以增加读者的信任度。

读者会认为这份文档你是认真写的，且看着比较专业。

认真 + 专业 = 信任 👍

原理

这些图标除了精美之外，它所展示的数据是实时的，这就非常酷了。

它让你文档呈现的数据永远都是准确的。

原理也较为简单，我们来解析一下这个路径：

https://img.shields.io/github/stars/vuejs/core?color=white&label

它就是往 img.shields.io 这个服务器请求图片，通过一定规则拼装出请求参数，让服务器知道我们需要什么数据。

示例的地址就是告诉服务器返回一张 表示 vue 仓库的 star 数量的图片

而这样的雷锋服务器目前我知道的有3个：

• shields.io/ 支持多种图标
• flat.badgen.net/ 支持多种图标
• packagephobia.com/ 只返回指定 npm 包所占用的内存大小

这些服务器会根据我们的请求参数，去获取数据源，将数据包装成一个漂亮的图标，返回给客户端。

我也想高大上

之前逛 NPM 的时候发现  got  这个包的 README.md 非常精美。作者列举了该库和其他类似库的一些对比数据，觉得非常专业。

于是我在写调研报告的时候也学着写了一个这样的表格：

表格看着是很舒服，可是编辑 markdown 的时候费了老命了。短短的一张对比表格，需要配置这么多的图片地址和图片链接，配置完了还得保证组合正确，瞬间觉得投入产出不成正比了。（除非写这样的报告可以拿奖金，否则不可能再写第二次！！）

如下文本是上面那张表格的 markdown 源码，来感受一下工作量：

## npm 包对比

|                    |    [`yauzl`][ygit]    | [`extract-zip`][egit] |   [`adm-zip`][agit]   |  [`unzipper`][ugit]   |   [`archiver`][argit]   |
| ------------------ | :-------------------: | :-------------------: | :-------------------: | :-------------------: | :---------------------: |
| Issues open        |   [![][yio]][yio_a]   |   [![][eio]][eio_a]   |   [![][aio]][aio_a]   |   [![][uio]][uio_a]   |   [![][ario]][ario_a]   |
| Issues closed      |   [![][yic]][yic_a]   |   [![][eic]][eic_a]   |   [![][eic]][aic_a]   |   [![][uic]][uic_a]   |   [![][aric]][aric_a]   |
| Downloads          |    [![][yd]][yd_a]    |    [![][ed]][ed_a]    |    [![][ad]][ad_a]    |    [![][ud]][ud_a]    |    [![][ard]][ard_a]    |
| Bugs               |  [![][ybug]][ybug_a]  |  [![][ebug]][ebug_a]  |  [![][abug]][abug_a]  |  [![][ubug]][ubug_a]  |  [![][arbug]][arbug_a]  |
| Dependents         |   [![][ydp]][ydp_a]   |   [![][edp]][edp_a]   |   [![][adp]][adp_a]   |   [![][udp]][udp_a]   |   [![][ardp]][ardp_a]   |
| Install size       | [![][ysize]][ysize_a] | [![][esize]][esize_a] | [![][asize]][asize_a] | [![][usize]][usize_a] | [![][arsize]][arsize_a] |
| GitHub stars       |  [![][ystar]][ygit]   |  [![][estar]][egit]   |  [![][astar]][agit]   |  [![][ustar]][ugit]   |  [![][arstar]][argit]   |
| TypeScript support |   [![][yts]][ygit]    |   [![][ets]][egit]    |   [![][ats]][agit]    |   [![][uts]][ugit]    |   [![][arts]][argit]    |
| Last commit        |   [![][ycm]][ycm_a]   |   [![][ecm]][ecm_a]   |   [![][acm]][acm_a]   |   [![][ucm]][ucm_a]   |   [![][arcm]][arcm_a]   |
| symlink support    |  :heavy_check_mark:   |  :heavy_check_mark:   |          :x:          |      :question:       |       :question:        |

<!-- https://gist.github.com/rxaviers/7360908 图标编码参考 -->

<!-- GITHUB -->

[ygit]: https://github.com/thejoshwolfe/yauzl
[egit]: https://github.com/max-mapper/extract-zip
[agit]: https://github.com/cthackers/adm-zip
[ugit]: https://github.com/ZJONSSON/node-unzipper
[argit]: https://github.com/archiverjs/node-archiver

<!-- ISSUES OPEN -->

[yio]: https://img.shields.io/github/issues-raw/thejoshwolfe/yauzl?color=gray&label
[eio]: https://img.shields.io/github/issues-raw/max-mapper/extract-zip?color=gray&label
[aio]: https://img.shields.io/github/issues-raw/cthackers/adm-zip?color=gray&label
[uio]: https://img.shields.io/github/issues-raw/ZJONSSON/node-unzipper?color=gray&label
[ario]: https://img.shields.io/github/issues-raw/archiverjs/node-archiver?color=gray&label
[yio_a]: https://github.com/thejoshwolfe/yauzl/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
[eio_a]: https://github.com/max-mapper/extract-zip/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
[aio_a]: https://github.com/cthackers/adm-zip/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
[uio_a]: https://github.com/ZJONSSON/node-unzipper/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
[ario_a]: https://github.com/archiverjs/node-archiver/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc

<!-- ISSUES CLOSED -->

[yic]: https://img.shields.io/github/issues-closed-raw/thejoshwolfe/yauzl?color=blue&label
[eic]: https://img.shields.io/github/issues-closed-raw/max-mapper/extract-zip?color=blue&label
[aic]: https://img.shields.io/github/issues-closed-raw/cthackers/adm-zip?color=blue&label
[uic]: https://img.shields.io/github/issues-closed-raw/ZJONSSON/node-unzipper?color=blue&label
[aric]: https://img.shields.io/github/issues-closed-raw/archiverjs/node-archiver?color=blue&label
[yic_a]: https://github.com/thejoshwolfe/yauzl/issues?q=is%3Aissue+is%3Aclosed+sort%3Aupdated-desc
[eic_a]: https://github.com/max-mapper/extract-zip/issues?q=is%3Aissue+is%3Aclosed+sort%3Aupdated-desc
[aic_a]: https://github.com/cthackers/adm-zip/issues?q=is%3Aissue+is%3Aclosed+sort%3Aupdated-desc
[uic_a]: https://github.com/ZJONSSON/node-unzipper/issues?q=is%3Aissue+is%3Aclosed+sort%3Aupdated-desc
[aric_a]: https://github.com/archiverjs/node-archiver/issues?q=is%3Aissue+is%3Aclosed+sort%3Aupdated-desc

<!-- DOWNLOADS -->

[yd]: https://img.shields.io/npm/dm/yauzl?color=darkgreen&label
[ed]: https://img.shields.io/npm/dm/extract-zip?color=darkgreen&label
[ad]: https://img.shields.io/npm/dm/adm-zip?color=darkgreen&label
[ud]: https://img.shields.io/npm/dm/unzipper?color=darkgreen&label
[ard]: https://img.shields.io/npm/dm/archiver?color=darkgreen&label
[yd_a]: https://www.npmjs.com/package/yauzl
[ed_a]: https://www.npmjs.com/package/extract-zip
[ad_a]: https://www.npmjs.com/package/adm-zip
[ud_a]: https://www.npmjs.com/package/unzipper
[ard_a]: https://www.npmjs.com/package/archiver

<!-- BUGS -->

[ybug]: https://img.shields.io/github/issues-raw/thejoshwolfe/yauzl/bug?color=darkred&label
[ebug]: https://img.shields.io/github/issues-raw/max-mapper/extract-zip/bug?color=darkred&label
[abug]: https://img.shields.io/github/issues-raw/cthackers/adm-zip/bug?color=darkred&label
[ubug]: https://img.shields.io/github/issues-raw/ZJONSSON/node-unzipper/bug-fix?color=darkred&label
[arbug]: https://img.shields.io/github/issues-raw/archiverjs/node-archiver/Bug?color=darkred&label
[ybug_a]: https://github.com/thejoshwolfe/yauzl/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Abug
[ebug_a]: https://github.com/max-mapper/extract-zip/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Abug
[abug_a]: https://github.com/cthackers/adm-zip/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Abug
[ubug_a]: https://github.com/ZJONSSON/node-unzipper/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22bug-fix%22
[arbug_a]: https://github.com/archiverjs/node-archiver/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3ABug

<!-- DEPENDENTS -->

[ydp]: https://badgen.net/npm/dependents/yauzl?color=orange&label
[edp]: https://badgen.net/npm/dependents/extract-zip?color=orange&label
[adp]: https://badgen.net/npm/dependents/adm-zip?color=orange&label
[udp]: https://badgen.net/npm/dependents/unzipper?color=orange&label
[ardp]: https://badgen.net/npm/dependents/archiver?color=orange&label
[ydp_a]: https://www.npmjs.com/package/yauzl?activeTab=dependents
[edp_a]: https://www.npmjs.com/package/extract-zip?activeTab=dependents
[adp_a]: https://www.npmjs.com/package/adm-zip?activeTab=dependents
[udp_a]: https://www.npmjs.com/package/unzipper?activeTab=dependents
[ardp_a]: https://www.npmjs.com/package/archiver?activeTab=dependents

<!-- INSTALL SIZE -->

[ysize]: https://packagephobia.com/badge?p=yauzl
[esize]: https://packagephobia.com/badge?p=extract-zip
[asize]: https://packagephobia.com/badge?p=adm-zip
[usize]: https://packagephobia.com/badge?p=unzipper
[arsize]: https://packagephobia.com/badge?p=archiver
[ysize_a]: https://packagephobia.com/result?p=yauzl
[esize_a]: https://packagephobia.com/result?p=extract-zip
[asize_a]: https://packagephobia.com/result?p=adm-zip
[usize_a]: https://packagephobia.com/result?p=unzipper
[arsize_a]: https://packagephobia.com/result?p=archiver

<!-- GITHUB STARS -->

[ystar]: https://img.shields.io/github/stars/thejoshwolfe/yauzl?color=white&label
[estar]: https://img.shields.io/github/stars/max-mapper/extract-zip?color=white&label
[astar]: https://img.shields.io/github/stars/cthackers/adm-zip?color=white&label
[ustar]: https://img.shields.io/github/stars/ZJONSSON/node-unzipper?color=white&label
[arstar]: https://img.shields.io/github/stars/archiverjs/node-archiver?color=white&label

<!-- TYPESCRIPT SUPPORT -->

[yts]: https://badgen.net/npm/types/yauzl?label
[ets]: https://badgen.net/npm/types/extract-zip?label
[ats]: https://badgen.net/npm/types/adm-zip?label
[uts]: https://badgen.net/npm/types/unzipper?label
[arts]: https://badgen.net/npm/types/archiver?label

<!-- LAST COMMIT -->

[ycm]: https://img.shields.io/github/last-commit/thejoshwolfe/yauzl?color=gray&label
[ecm]: https://img.shields.io/github/last-commit/max-mapper/extract-zip?color=gray&label
[acm]: https://img.shields.io/github/last-commit/cthackers/adm-zip?color=gray&label
[ucm]: https://img.shields.io/github/last-commit/ZJONSSON/node-unzipper?color=gray&label
[arcm]: https://img.shields.io/github/last-commit/archiverjs/node-archiver?color=gray&label
[ycm_a]: https://github.com/thejoshwolfe/yauzl/commits
[ecm_a]: https://github.com/max-mapper/extract-zip/commits
[acm_a]: https://github.com/cthackers/adm-zip/commits
[ucm_a]: https://github.com/ZJONSSON/node-unzipper/commits
[arcm_a]: https://github.com/archiverjs/node-archiver/commits

### 选择的依据：

-   软连接的支持（编辑器内部有软连接）
-   较少的依赖
-   较多的下载量

综合以上数据，[yauzl][ygit] 是下载量最大的，但是它提供的接口相对底层。所以最终选择 [extract-zip][egit]，它是对 yauzl 的一个简单的封装。对外提供更简单的接口。

手写是不可能了，但是我们是程序员啊！类似这样的配置性的东西最适合程序化了。

于是就决定开发一个浏览器插件，用来快速制作 NPM 包的对比表格。

就像逛购物商城一样，在商品详情页可以点击商品到对比列表。方便用户横向对比多个商品。

浏览器插件

懒是第一生产力，于是就有了 chrome-npm-comparison 这款浏览器插件。Chrome 安装地址

该插件在 npm 的包的详情页，添加一个 「Add to npm Comparison」 的按钮。

点击之后会生成对比表格：

还提供了众多图标选项供你自由组织表格数据：

表格生成之后你可以将它复制到 Markdown 或者 HTML 。

这样无论是你需要介绍自己的 npm 包，还是写一篇技术调研文档，都可以快速制作出一份精美的 npm 包对比表格。

• 插件安装地址：Chrome 安装地址
• 插件仓库地址：chrome-npm-comparison

友情提示

如果看文章的你在点击这些外链会看到这个页面：

那么你可以安装我的另外一个浏览器插件 「redirect-skipper」它可以让你无感跳过这些中转页面。

• 项目地址： Github
• 安装地址： 谷歌插件安装