git上那些有意思的库(一)

github 文章 2021-05-09 21:00 49 0 全屏看文

这里主要推荐一下自己平时常用,提高效率的一些库和软件。

#前端常用

  • 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 更轻量,建议一般业务用这个

#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 组件

#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,通过图形化界面进行操作

#Node

#工具库

  • 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 依赖

#调试

#GraphQL

  • prisma 让前端也能快速的写出

  • Apollo GraphQL 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便

  • dataloader 解决 Graphql 中的 N+1 查询问题

-EOF-