常用库与工具

这里主要推荐一下自己平时常用，提高效率的一些库和工具。

常用库

收集库

• hocs react 相关 hoc 收集库
• markdown-it-emoji 将对应 emoji 表情的符号码复制后输入你的 markdown 文本即可显示 emoji 表情。

通用库

• markdown-toc Generate a markdown TOC (table of contents) with Remarkable.自动生成 markdown 的导航栏

• html-dom 一些常用的 dom 或者原生 js 操作判断，挺实用的

• moment.js是一个简单易用的轻量级 JavaScript 日期处理类库，提供了日期格式化、日期解析等功能。它支持在浏览器和 NodeJS 两种环境中运行。

• moment.js 中文网

• html2canvasJavaScript 实现页面截图的类库

• Immutable.jsImmutable 是 Facebook 开发的不可变数据集合

• clipboard.jsClipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。

• passportjs Passport 是一个 Node 平台的身份认证中间件，极其灵活和模块化

• axios 中文文档 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

• sweetalert2 一个自适应，且自定义性强的弹出框（零依赖）

• tippy.js 最著名的 tooltip/popover library

• text-mask 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input

• dinero.js 用来创建、计算和格式化货币价值的不可变的框架，支持国际化

• img-2 一个提高图片加载性能和体验的库，懒加载使用 web worker 模糊预览

• fingerprintjs 是一个快速的浏览器指纹库，通浏览环境的一系列配置生成 id

• ajv 一个 json schema 验证的库

• dayjs Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js

• primjs 让页面支持代码高亮

• uppy 一个很好看的也很好用的 前端上传库

• Filepond 一个小巧的文件上传库

• tui-calendar 功能全面的日程安排日历控件，还支持拖拽

• spritejs SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库，可以基于 canvas 快速绘制结构化 UI 、动画和交互效果，并发布到任何拥有 canvas 环境的平台上（比如浏览器、小程序和 node ）

• tui.image-editor 一个功能齐全的在线图片编辑，基于 canvas

• nanoid 是使用 JavaScript 开发、一个小型、安全、对 URL 友好的唯一字符串 ID 生成器。据作者说，比 uuid 更可靠和好用。至少从 API 的功能和易用性来看，似乎确实如此

• rxdb 一款开源的快速、灵活的客户端数据库，支持各种浏览器以及 NodeJS，Electron、React 等等，是 PouthDB 之上的一个封装库

• ImmortalDB 是用于浏览器的弹性键值存储 ImmortalDB 是在浏览器中存储持久键值数据的最佳方法，保存在其中的数据被冗余地存储在 Cookies、IndexedDB

• big.js 解决 js 浮点数问题。 主要就是 Big Number 或者小数点，一个用于任意精度十进制算术的小而快速的 JavaScript 库。

• bignumber.js 同上

• stickybits CSS 的 position: sticky 是一个很有用的设置，但是老的浏览器不支持。这个 JS 库是该功能的垫片库。

• cleave.js 用于在输入时格式化输入内容（信用卡格式、日期等）

• shiny 在手机设备上模拟光的反射效果。 支持 DeviceMotion 事件

• rrweb 一个可以记录你页面中所有操作的库

• nodeppt markdown 写 ppt

• flexsearch 能让你更加高效和快速的检索文本内容

• scroll-hint 用于提示用户页面可以左右滑动的一个提示库

• fuse.js 轻量级前端模糊查询库 非常的好用

• FileSaver.js 文件下载插件 很多时候下载会有兼容性问题，它能帮你解决这些问题

• selection 可视化选择页面元素的库

• scroll-out 滚动效果（滚动视差）的框架，框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配

• gpu.js 通过将 js 转为特定的 language，利用 GPU 来执行，大大提高了执行性能和速度

• pressure 前端实现 3D Touch

• hammer 移动端手势库

• AlloyFinger 腾讯出的手势库

• lowdb LowDB 是一个本地 JSON 数据库，基于 Lodash 开发的

• JSON-server 可以配合 LowDB 使用 快速搭建一个 REST API

• lunr.js 是个用于浏览器的轻量级 JavaScript 全文搜索引擎,对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索

• he 一个前端 encoder/decoder 库

• grade 一个可以根据你的 图片 调整底色的插件

• pretty-bytes 将字节转换成可以读的字符串，比如 1337 个字节，会显示成 1.34 KB

• pagemap Mini map for web pages 页面导航图

• commonmark.js parser and renderer markdown

• body-scroll-lock 解决滚动穿透问题

• lightgallery 图片预览组件

• photoswipe 图片预览组件，支持移动端

• darken 页面黑夜模式切换

• mitt Tiny 200b functional event emitter / pubsub

• sanitize-html html 过滤库，防 xss

• DOMPurify 比 sanitize-html 更轻量，建议一般业务用这个

• mdx jsx + markdown

Css && 动画

• animate.css 最有名的动画效果库
• magic.css css 动画效果库 类似 animate.css
• popmotion 一个函数式声明前端动画库
• NES.css 任天堂主题风格 css 库
• particles.js 前端实现颗粒粒子的动画效果库，比较炫酷，但相对的也比较吃性能
• PaperCSS 手绘风格感觉 css 库
• rough 基于 Canvas 的手绘风格图形库
• wired-elements 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components
• roughViz rough 风格的图表库 手绘风格的图表库
• matter-js web 物理引擎
• micron 通过在元素上绑定属性从而实现动画效果的库
• direction-reveal 根据鼠标进入位置，展现从不同方向 展现 hover 效果
• laxxx 滚动特效库 轻量级 压缩完 2kb
• cssfx 优雅的 CSS 动画效果，开箱即用
• zdog 3D engine 引擎
• leonsans 酷炫的 字体 动画 geometric sans-serif typeface made with code
• css-doodle A web component for drawing patterns with CSS 一个用于使用 CSS 绘制图案的 Web 组件

React

• React Icons 将一些受欢迎的图标包含到 React 项目中
• formik构建 React 表单的开源库：Formik
• react-jsonschema-form Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
• rawact 一个 babel 插件，把 react 组件转为原生 dom

Vue

• vue-multiselect select 组件 目前 vue 里面用过最好用的
• Vue.Draggable DnD 拖拽组件 基于 Sortable.js 的 vue 版本
• vue-sauce 一个可以展示 vue 源码的指令
• vue-smooth-dnd Vue wrappers components for smooth-dnd
• vuegg 一个 vue 可视化拖拽界面生成器
• vee-validate 基于 vue 的验证，能验证的内容比较全
• vuesax 一个很漂亮的基于 vue 的 ui 框架
• vue-analytics 基于 vue 的 谷歌统计封装
• vue-virtual-scroller 基于 vue 的虚拟列表无限滚动
• vue-content-placeholders 页面龙骨 skeleton
• buefy 适配移动端的 vue 组件库 看着还挺舒服的
• vxe-tablevue 表格解决方案，还没具体用过看着的确解决了其它 table 组件的一些问题

工具库

• live-server 可以快速启一个本地 dev 服务 并且支持自动刷新的 http server
• serve 快速起本地静态服务
• picojs js 人脸识别库
• es-checker 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js
• merge-images 图片合成，利用canvas能将几张图片合成一张
• fabric.js 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。
• phaser 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。 你可以为 iOS、 Android 和不同的本地应用程序创建游戏。
• purifycss 移除没使用到的 css
• dropcss 同上
• fast-cli 命令行测试下载上传速度
• @pika/web 让你不需要在本地 webpack 中 import，直接在游览器里面运行 npm 包
• pinyin 汉字拼音转换工具
• JavaScript Obfuscator Tool js 代码混淆工具
• tesseract 图像识别，它能识别图片中的文字，支持中文
• gka 一款高效、高性能的帧动画生成工具。只需一行命令，快速图片优化、生成动画文件，支持效果预览。
• recast 前端 ast 库
• jscodeshift 将 js 内容解析成 AST 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改
• stats.js 前端性能监控 如 FPS、内存使用情况等
• PapaParse 解析 csv excel
• mddir 生成 markdown file/folder structure 目录结构 tree
• imagemin 图片压缩库
• inline-css css covert to inline style 在生成 email 格式 html 的时候特别有用
• babel-plugin-try-catch-error-report 全局自动 catch 错误进行数据上报
• StreamSaver.js 大文件下载，不用像 saveAs 那样先读到内存中再下载
• mammoth.js Convert Word documents (.docx files) to HTML
• npkill 列出所有 node_modules，并支持删除
• strapi 开源的解决方案来创建、部署和管理自己的 API，通过图形化界面进行操作
• cheerio 为服务器特别定制的，快速、灵活、实施的 jQuery 核心实现.
• node-semver node 版本验证库
• live-server 一个简单的 http server 带有 reload 功能
• node-portfinder 一个端口嗅探工具
• update-notifiernode 依赖升级提醒工具
• fastscan node 敏感词库
• hygen 快速方便的创建代码 可以命令行创建预设的 template
• ink 是一个 React 的命令行渲染器，命令行界面可以像写页面那么写了
• dotenv 通过.env 设置环境部变量 vue-cli 也依赖它
• patch-package 优雅的修改 node_modules 中的依赖库
• Playwright 同 Puppeteer 团队出品，但区别是它支持 Chrome、Safari、Firefox、Edge
• tree-cli node 根据目录结构生成 tree
• tree-node-cli node 根据目录结构生成 tree
• open node 打开浏览器

命令行相关

• signale 一个 Node 的日志格式库，自带 16 个级别，可以定制颜色和 Emoji，可扩展的日志记录器
• consola 优雅的命令行 console logger vuepress 也使用了它
• chalk 命令行着色美化库
• progress-estimator 命令行 progress bar 进度条模拟库
• ora Elegant terminal spinner 命令行 loading
• listr Terminal task 命令行任务列表
• yargs 命令行参数解析
• y18n yargs 基于 i18n 的一个包
• commander.js 自动的解析命令和参数，合并多选项，处理短参，等等，功能强大，上手简单
• Inquirer.js A collection of common interactive command line user interfaces. 命令行询问库
• enquirer 命令行 prompt 询问库，写 cli 的时候很有用
• Qoa 同上
• cli-progress Terminal Progress Bar
• cli-table tables for the CLI
• node-notifier 在 NodeJS 环境中，可以很方便的唤起 notifier 通知

文件处理相关

• rimraf 删除文件
• globby 用于模式匹配目录文件
• glob 文件查找
• tiny-glob 文件查找
• chokidar node 监听文件变化的库
• fs-extra fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API
• execa 比 child_process 好用，返回 Promise
• npm-run-all 一个 CLI 工具可以并行或者串行执行 script 指令
• memfs memory-fs 的替代品，将文件放在内存中优化读写，webpack 依赖

调试相关

• fx 命令行优化 JSON 输出
• dumper.js 能让你的 node console 更加的规整，方便调试
• ndb node 调试
• why-is-node-running 查看 node 为什么在运行
• siege 压测工具

Webpack

• webpackbar webpack 打包进度条
• jarvis webpack dashboard
• webpack-chain 通过 chain 风格 api 的方式修改 webpack 配置
• speed-measure-webpack-plugin 统计 webpack 各阶段的耗时
• obsolete-webpack-plugin 基于 browserslist 做浏览器升级提示
• mini-css-extract-plugin 提取 CSS 为单独文件
• copy-webpack-plugin 复制额外的文件到输出目录
• duplicate-package-checker-webpack-plugin 检查是否存在重复依赖
• cssnano CSS 压缩
• bundle-buddy webpack bundle 依赖分析

移动端

• fastclick 解决移动端一些点击问题

性能优化

• workbox PWA 方案，Google 出品

请求处理

• axios 目前最常见的请求库
• got http 请求库 如果你觉得 request 太多的话 这是一个不错的选择
• request 老牌请求库
• whatwg-fetch fetch 请求库
• grpc-web 前端直连 gRPC 服务
• node-fetch node 环境下轻量级 fetch 请求库
• reqwest

工程化相关

• lerna monorepo 管理
• lerna-changelog 为 lerna 项目自动生成 changelog
• eslint JS 风格约束
• eslint-config-airbnb airbnb 约束风格
• xo 封装自 eslint
• prettier 更主观的风格自动修改
• yeoman-generator 脚手架工具
• serve 本地静态服务器
• np npm publish 辅助，自动 push、打 tag、升版本等
• lint-staged eslint 提速，只 lint 提交的代码
• coveralls 覆盖率
• husky 添加 git hooks
• cross-env 跨平台的环境变量声明
• nvm 管理 node 版本
• concurrently 在 npm scripts 里并行执行命令
• @zeit/ncc 打包为 npm 包为一个文件
• npm-check 检测依赖升级情况，我会和 yarn upgrade-interactive 配合着用，主要用来检测冗余依赖
• cpx 复制，支持 glob，并且可以 watch
• onchange 监听文件变动然后做一些事
• tasksfile 在 node 中执行 script 脚本

插件

• pulltorefresh.js 下个下拉刷新插件
• chancejs Chance 是一个轻量级的随机字符串生成器 JavaScript 插件，可帮助减少编写单调的代码，特别是在编写自动化测试时经常需要各种随机内容。
• instant.page 一个判断用户行为 预测提前加载页面的库
• screenfull.js 浏览器全屏插件 解决了不少兼容性问题