这里主要推荐一下自己平时常用,提高效率的一些库和软件。
sweetalert2 一个自适应,且自定义性强的弹出框(零依赖)
tippy.js 最著名的 tooltip/popover library
text-mask 可以让 input 按照规则输入(如电话,email,日期,信用卡等),特殊格式 input
dinero.js 用来创建、计算和格式化货币价值的不可变的框架,支持国际化
lerna 大项目版本控制工具,项目中可以有多个 package.json 文件
img-2 一个提高图片加载性能和体验的库,懒加载使用 web worker 模糊预览
fingerprintjs 是一个快速的浏览器指纹库,通浏览环境的一系列配置生成 id
ajv 一个 json schema 验证的库
dayjs 一个轻量级类 moment.js API 时间库
primjs 让页面支持代码高亮
ReLaXed 一个将 document html 转成 PDF 的工具
uppy 一个很好看的也很好用的 前端上传库
Filepond 一个小巧的文件上传库
tui-calendar 功能全面的日程安排日历控件,还支持拖拽
tui.editor markdown 所见即所得编辑器
tabler 基于 Bootstrap 4 的 Dashboard UI Kit 和美观 高颜值 ui 模板
pulltorefresh.js 下个下拉刷新插件
lulu 腾讯阅文基于 jQuery,针对 PC 网站 IE8+(peak 主题)的前端 UI 框架
chancejs 生成随机数据的库
spritejs 360 奇舞团出的跨平台绘图对象模型
tui.image-editor 一个功能齐全的在线图片编辑,基于 canvas
nanoid 前端轻量 unique string ID 生成库
rxdb 一款开源的快速、灵活的客户端数据库,支持各种浏览器以及 NodeJS,Electron、React 等等,是 PouthDB 之上的一个封装库
percollate 命令行工具 能将网页转换成 pdf
rawact 一个 babel 插件,把 react 组件转为原生 dom
irondb 是一个浏览器 key-value 储存的封装库,把 Cookies、IndexedDB、LocalStorage、SessionStorage 统一成一个接口。它的最大特色就是数据冗余机制,即使某种底层储存机制失效,它可以从其他机制恢复数据。
big.js 解决 js 浮点数问题。 主要就是 Big Number 或者小数点温柔
bignumber.js 同上
stickybits CSS 的 position: sticky 是一个很有用的设置,但是老的浏览器不支持。这个 JS 库是该功能的垫片库。
react-jsonschema-form Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
cleave.js 用于在输入时格式化输入内容(信用卡格式、日期等)
shiny 在手机设备上模拟光的反射效果。 支持 DeviceMotion 事件
cloudquery Turn any website to serverless API
A-Programmers-Guide-to-English 专为程序员编写的英语学习指南。
rrweb 一个可以记录你页面中所有操作的库
nodeppt markdown 写 ppt
flexsearch 能让你更加高效和快速的检索文本内容
public-apis 汇集了市面上一些对外免费开放的 api,做一些自己练手 app 的时候很好用。
scroll-hint 用于提示用户页面可以左右滑动的一个提示库
fuse.js 轻量级前端模糊查询库 非常的好用
FileSaver.js 文件下载插件 很多时候下载会有兼容性问题,它能帮你解决这些问题
instant.page 一个判断用户行为 预测提前加载页面的库
screenfull.js 浏览器全屏插件 解决了不少兼容性问题
VuePress 本网站就是基于它实现的,简单方便的静态网站生成器
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
runkit 一个基于 node 的在线 playground
chart.xkcd 手绘风格的图表库
sketchviz 手绘风格流程图
pagemap Mini map for web pages 页面导航图
commonmark.js parser and renderer markdown
body-scroll-lock 解决滚动穿透问题
lodash 前端工具函数集合
dayjs 时间处理库,不过大部分情况下我还是用自己的封装的函数
lightgallery 图片预览组件
photoswipe 图片预览组件,支持移动端
darken 页面黑夜模式切换
mitt 轻量级 pub/sub
sanitize-html html 过滤库,防 xss
DOMPurify 比 sanitize-html 更轻量,建议一般业务用这个
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 组件
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 组件的一些问题
Vue 测试指南 vue 测试指南
Jasonette 一个用 json 来构建 hybrid App 的框架
crate 一个 react 全栈练习(pc,mobile,rn,api) demo,适合入门拿来练手
react-in-patterns 一本开源教你如何写 react 的书
hocs react 相关 hoc 收集库
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 语法处理 HTML
node-semver node 版本验证库
live-server 一个简单的 http server 带有 reload 功能
node-portfinder 一个端口嗅探工具
update-notifiernode 依赖升级提醒工具
fastscan node 敏感词库
hygen 快速方便的创建代码 可以命令行创建预设的 template
plop 同上,代码生成工具
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 压测工具
node-in-debugging node.js 调试指南
node-best-practices node 最佳实践
prisma 让前端也能快速的写出
Apollo GraphQL 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便
dataloader 解决 Graphql 中的 N+1 查询问题