logo头像

叩首问路,码梦为生

最好用的工具和 NPM 库都在这里了

分享一些 NPM 库或者其他实用的工具

visx


visx

Github 地址:https://github.com/airbnb/visx

可重用的 low-level 可视化图表组件的集合。visx 将 d3 的强大功能与 react 更新 DOM 的优势结合了起来,可以最大化渲染性能,同时也支持基本上所有类型的图表

Mitt


mitt

Github 地址:https://github.com/developit/mitt

只有 200b 的 JS event emitter / pubsub

fzf


fzf - a command-line fuzzy finder

Github 地址:https://github.com/junegunn/fzf

是一个通用的命令行模糊查找器,可视化做的比较好,非常方便实用:



Dark Reader

Github 地址:https://github.com/darkreader/darkreader

让网页变成“暗黑模式”,有 Edge 插件Chrome 插件Firefox 插件,同时也可以npm install后在自己的网页上使用:

Dark Reader screenshot

postcss-pxtorem

一个用于 postcs 的插件,可以自动将 CSS 中的 px 这种单位转换成 rem,很适合移动端使用

emotion


emotion

Github 地址:https://github.com/emotion-js/emotion
官网:https://emotion.sh/

高效且灵活的 CSS-in-JS 库:

1
2
3
4
5
6
7
8
9
10
11
12
13
/** @jsx jsx */
import { jsx } from '@emotion/core'

let SomeComponent = props => {
return (
<div
css={{
color: 'hotpink'
}}
{...props}
/>
)
}

Parallax.js

Github 地址:https://github.com/pixelcog/parallax.js/
官网:http://pixelcog.github.io/parallax.js/

简单的视差滚动 JQuery 插件

FR 可视化 schema 编辑器

Github 地址:https://github.com/form-render/schema-generator

经常做中后台的前端同学对于表单可以说是“苦不堪言”,而可视化表单生成是一个比较好的解决方案,可以将研发从写表单的重复劳动中解放出来,该库的 demo 演示:https://x-render.gitee.io/schema-generator/playground

Driver.js



Github 地址:https://github.com/kamranahmedse/driver.js

功能强大、高度可定制的元素高亮库,在做新人引导以及元素高亮时可以考虑试用一下,在线查看 demo

typestyle

Github 地址:https://github.com/typestyle/typestyle

使用它之后,用 TypeStyle 编写 CSS 就像用 TypeScript 编写 JavaScript 一样流畅。

lrz

目前已不再维护

Github 地址:https://github.com/think2011/localResizeIMG

前端对图片进行压缩,可以点击这里直接进入演示页面

npkill


npkill logo
npkill logo scope

Github 地址:https://github.com/voidcosmos/npkill

可以轻松查找和删除旧的和比较大的的node_modules文件夹


npkill demo gif

RobotJS

Github 地址:https://github.com/octalmage/robotjs

基于 NodeJS 的桌面自动化控制库,封装了一些实用的鼠标、键盘、桌面等 API,支持 Mac、Windows 和 Linux。

React Hook Form

Github 地址:https://github.com/react-hook-form/react-hook-form

高性能、灵活、易拓展、易于使用的表单校验库

Resemble.js

Resemble.js

Github 地址:https://github.com/rsmbl/Resemble.js

通过 HTML5 和 Javascript 对图像进行分析,还可以进行两张图像的对比,demo 见:http://rsmbl.github.io/Resemble.js/

node-opencv-compare-images

Gitee 地址:https://gitee.com/txdd/opencv-compare-image

使用opencv比较两个图片的相似度,比 Resemble.js 要专业一些,但是已经好久没更新了

caniuse-cmd

Github 地址:https://github.com/sgentle/caniuse-cmd

兼容性测试工具,使用也很简单,比如:

1
caniuse websockets

fingerprintjs2

Github 地址:https://github.com/fingerprintjs/fingerprintjs2

现代而灵活的浏览器指纹库,使用很简单,还有另外一个差不多的库:clientjs,关于浏览器指纹,可以看这篇文章:浏览器指纹:原来我们一直被互联网巨头监视,隐私在网上裸奔、无处可藏

wallace-cli

Github 地址:https://github.com/bartveneman/wallace-cli

通过命令行分析 CSS 的工具,配合某些其他提取 CSS 文件等工具可以用于网站分析和优化

chromatic

官网:https://www.chromatic.com/

是一个可以快速发布 UI 组件库的 Storybook 的工具,可以关联 Github 仓库,操作非常简单

NodeGui

官网:https://docs.nodegui.org/#quick-start

使用 Javascript 和 CSS 构建性能良好的跨平台桌面应用程序,对标的是 electron

FunDebug

官网:https://www.fundebug.com/

Fundebug提供全栈错误监控服务,通过邮件、钉钉、倍洽、Slack等第三方工具实时报警,提供全面的报错信息帮助您快速分析问题,改进产品。目前支持网站、JS、微信小程序、微信小游戏、Java、Node.js等的错误监控,通过记录程序异常的堆栈、网络请求错误、资源加载错误、并且记录用户行为利用独创的可视化重现技术来帮助您改进产品,提升用户体验。

分为免费版、付费版、本地版三种,价格不低,但是一些付费客户中不乏一些知名大厂

docz

Github 地址:https://github.com/doczjs/docz/
官网:https://www.docz.site/

非常好用的文档生成工具,使用特定语法可以生成相应文档站,比较适合类似于 antd 官网组件示例文档那样的场景

unlayer

Github 地址:https://github.com/unlayer
官方文档地址:https://docs.unlayer.com/docs

是一个可以生成电子邮件编辑器和登录页的生成器,支持了各种个性化配置

mjml

Github 地址:https://github.com/mjmlio/mjml

定义了一种 MJML 语法,将 MJML 转换为 响应式的 HTML,可用来编写个性化邮件

pinyin

Github 地址:https://github.com/hotoo/pinyin

转换中文字符为拼音。可以用于汉字注音、排序、检索。同时还有 Python 版和 NodeJS 版。

yddict

Github 地址:https://github.com/kenshinji/yddict

有道词典命令行查询工具,相比应用程序和网页都要方便许多,非常适合程序员日常使用

whistle

官方文档:http://wproxy.org/whistle/

whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler,主要用于查看、修改HTTP、HTTPS、Websocket的请求/响应,也可以作为HTTP代理服务器使用,不同于Fiddler通过断点修改请求响应的方式,whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式,且可以通过Node模块扩展功能。
如果想快速上手使用常用的功能,可参考:https://juejin.im/post/5df1baae6fb9a016470c1f98。

is-progressive-cli

NPM 地址:https://www.npmjs.com/package/is-progressive-cli

用来检查 JPEG 图像是否是渐进式的。

pangu

Github地址:https://github.com/vinta/pangu.js

用来在所有的中文字和半形的英文、数字、符号之间插入空白。不仅有支持 Chrome 和 Firefox 浏览器的插件版本,还有以下几种语言的库:

  • Go
  • Java
  • Javascript
  • Python

svrx

官网:https://svrx.io/
Github地址:https://github.com/svrxjs/svrx

一个渐进且易于使用的、插件化的前端开发平台

可以这样快速试用:

1
2
3
4
npm install -g @svrx/cli
mkdir example && cd example
echo '<html><body>Hello svrx!</body></html>' > index.html
svrx

网易云音乐前端技术团队出品,其定位是:

  • svrx 是面向前端开发者的一个强大的本地 dev server,它由本地服务、proxy、livereload 等功能插件组成
  • svrx 有着丰富强大的插件系统,你可以自由使用或者定制想要的功能

更多关于其特性和使用介绍可参考:Server-X:一款可能提升你十倍工作效率的工具

ytdl-core

NPM地址:https://npmjs.com/package/ytdl-core

Youtube 下载模块,和其他模块相比,该模块的特点在于纯用 JS 编写,同时使用了 NodeJS 友好的 stream API

prismjs

官网地址:https://prismjs.com/index.html

一个漂亮而且小巧的代码语法高亮插件,很多大网站都在用,有如下优点:

  1. 极致易用:引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!
  2. 天生伶俐:语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。
  3. 轻如鸿毛:代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。
  4. 快如闪电:如果可能,支持通过 Web Workers 实现并行。
  5. 轻松扩展:定义新语言或扩展现有语法,或者新增功能都非常简单。
  6. 丰富样式:所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

acorn

Github 地址:https://github.com/acornjs/acorn

一个非常轻量的JS代码解析器,可用于语法检测,AST检测等领域

Cloc

Github 地址:https://github.com/AlDanial/cloc

Cloc是一款使用Perl语言开发的开源代码统计工具,支持多平台使用、多语言识别,能够计算指定目标文件或文件夹中的文件数(files)、空白行数(blank)、注释行数(comment)和代码行数(code)。

虽然这是一个命令行工具,但是其作用非常强大,具体使用参考:代码统计利器 Cloc,如果是前端工程,可以如此使用:

1
cloc --exclude-dir=node_modules .

http-server

NPM 地址:https://www.npmjs.com/package/http-server
Github地址:https://github.com/indexzero/http-server

只需要一行命令就可以起一个 HTTP Server

live-server

NPM 地址:https://www.npmjs.com/package/live-server
Github 地址:https://github.com/tapio/live-server

也是起一个 HTTP Server,只不过带 live reload 的功能

glyphhanger

NPM 地址:https://www.npmjs.com/package/glyphhanger
Github 地址:https://github.com/filamentgroup/glyphhanger

一个 .ttf 转 WOFF/WOFF2 等 Web 字体格式的命令行工具,可以:

  • 抓取远程或本地文件并分析其中包含的文字
  • 将分析结果去重排序并转换为 Unicode 码点
  • 根据指定的源字体生成对应格式的子集(需要安装另一个工具,稍后介绍)
  • 同时也生成包含 @font-face 规则的 CSS 文件

具体用法参见:前端字体截取

google-translate-api

Github地址:https://github.com/matheuss/google-translate-api

免费且无限制的谷歌翻译 API 库

changelog

NPM 地址:https://www.npmjs.com/package/changelog
Github 地址:https://github.com/dylang/changelog

根据 commit 信息生成 changelog 文件,其实具有类似功能的还有

svg-term-cli

NPM 地址:https://www.npmjs.com/package/svg-term-cli
Github 地址:https://github.com/marionebl/svg-term-cli

可以将 terminal 中的操作和输出生成对应的 svg,类似下面这张图片所展示的:

rimraf

Github 地址:https://github.com/isaacs/rimraf

rm -rf 命令 for nodejs

roa

Github 地址:https://github.com/sindresorhus/ora

定制化 terminal 中展示的 loading 动画:

gwm

NPM 地址:https://www.npmjs.com/package/gwm
Github 地址:https://github.com/loadchange/gwm

试用过好几款添加水印的库,只有这一款我能用,demo:http://yanfu.vip/gwm/

youtube-dl

NPM 地址:https://www.npmjs.com/package/youtube-dl
Github 地址:https://github.com/przemyslawpluta/node-youtube-dl

可以下载 youtube 视频,同时下载完成之后会展示该视频的相关信息

husky

Github 地址:https://github.com/typicode/husky

可以很方便的添加 git hook,目前已被各大开源库使用,实用性可见一斑

cz-cli

Github 地址:https://github.com/commitizen/cz-cli

不知道 commit message 怎么写?cz-cli 以可视化的方式帮助你提交合适的语义化的 message

Lighthouse

Github 地址:https://github.com/GoogleChrome/lighthouse

Lighthouse 是一个 Google Chrome 开源的自动化工具,用于改进网络应用的质量。可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。可以参考失败的测试,看看可以采取哪些措施来改进应用。

运行 Lighthouse 的方式有两种:作为 Chrome 扩展程序运行,或作为命令行工具运行:

1
2
npm install -g lighthouse
lighthouse https://merrier.wang

speedracer

Github 地址:https://github.com/speedracer/speedracer

SpeedRacer 是一款性能测试工具,它在 Chrome 中运行脚本,并生成详细的性能报告。SpeedRacer 是直接借助浏览器来实际测试性能的工具,在实际工作中,可以与其它模拟用户访问流量来评估性能的工具配合使用。

PapaParse

Github 地址:https://github.com/mholt/PapaParse
官网:https://www.papaparse.com/

PapaParse 是一款 CSV 解析工具,可优雅地处理大文件和格式错误的输入。

dom-to-image

Github 地址:https://github.com/tsayen/dom-to-image

提供了诸多方法,可以将 DOM 节点直接转换成 JPEG、PNG、SVG、Blob 等格式,同时还可以从中进行个性化设置,功能强大,兼容性良好

Caddy

Github 地址:https://github.com/mholt/caddy/

鼎鼎大名的 Caddy,是一个面向生产环境的开放源码 Web 服务器,它快速、易于使用。支持多个平台:Windows、Mac、Linux、BSD、Solaris 以及 Android。

cheerio

Github 地址:https://github.com/cheeriojs/cheerio

Node 层的 jQuery,一般借助它实现各种爬虫,结合 superagent 可以非常方便的爬取网页信息

Nodemailer

Github 地址:https://github.com/nodemailer/nodemailer

发送邮件的 Node 插件,兼容主流的 Email 厂商,只需要配置好邮箱账号和 SMTP 授权码,便可以用你的邮箱账号在 Node 脚本上发文件

node-schedule

Github 地址:https://github.com/node-schedule/node-schedule

这是一个有着各种配置的定时任务发生器,可以定时每个月、每个礼拜、每天具体什么时候执行什么任务,具体应用:

stickybits

Github 地址:https://github.com/dollarshaveclub/stickybits

position:sticky 解决方案,代码精炼,纯 CSS

fx

Github 地址:https://github.com/antonmedv/fx

可以对 terminal 中的 JSON 格式的数据进行非常友好的格式化展示:

fx

支付宝打赏 微信打赏

听说赞过就能年薪百万