浏览器端开发的常用第三方库,大前端必备!
无环境依赖的库
兼容补丁 - (让你的代码在IE中自由驰骋
)
包名 | 作用 |
---|
regenerator-runtime | 提供babel编译后的async和genertor等函数具体实现 |
core-js@2 | 上一代浏览器polyfill库 |
core-js@3 | 相当完善的polyfill程序集 |
buble | es5,jsx语法转换器 |
babel | 上一代兼容语法转换器 |
@babel/standalone | 运行在浏览器总编译兼容旧版浏览器的包 |
@babel/runtime | 包含babel和regenerator-runtime的运行时 |
@babel/runtime-corejs2 | 包含babel运行时+core-js@2 |
@babel/runtime-corejs3 | 包含babel运行时+core-js@3 |
@babel/polyfill | 兼容新API特性组件,加载polyfill |
@babel/plugin-transform-runtime | 结合@babel/runtime-corejs3按需编译导入ployfill |
@babel/preset-env | 包含按需引入和根据浏览器自动转换代码的预设包 |
eventsource | eventsource polyfill |
event-source-polyfill | eventsource polyfill |
js-polyfills | JavaScript Polyfills |
history | 使用JavaScript管理会话历史记录 |
html5shiv | :针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素 |
normalize.css | CSS reset的现代替代方案 |
respond | 让浏览器支持CSS3媒体查询的代码块程序 |
CSS预处理 - (花式畅写css,增加可读性
)
包名 | 作用 |
---|
less | 简单易学但是不怎灵活的预处理器 |
sass | 功能强但是旧版本环境配置麻烦的预处理器 |
stylus | 更有活力,阅读更加简洁但是似乎不怎火的预处理器 |
postcss | 对你的css做兼容等一些后置处理方案 |
模块化 - (现代前端开发方式
)
包名 | 作用 |
---|
requireJS | 基于AMD规范的模块化处理工具 |
seajs | 基于CMD规范的模块化处理工具 |
网络相关 - (让我们和后端建立连接
)
媒体 - (音频、视频你想看的精彩的浏览器世界
)
包名 | 作用 |
---|
cplayer | 漂亮干净的 HTML5 WEB 音乐播放器 |
aplayer | 漂亮的HTML5音乐播放器 |
xgplayer | 西瓜视频播放器 |
dplayer | HTML5 弹幕视频播放器 |
plyr | 用于视频、音频、YouTube 和 Vimeo 的简单、可访问和可自定义的媒体播放器 |
howler | 用于现代网络的 Javascript 音频库 |
video.js | 开源 HTML5 和 Flash 视频播放器 |
flv.js | HTML5 FLV Player |
hls.js | 可在支持 MSE 的浏览器中播放 HLS |
adapterjs | 在浏览器中为 WebRTC 创建通用 API |
asciinema-player | 用于终端会话记录的网络播放器 |
crunker | 使用 Web Audio API 合并或连接音频文件的简单方法 |
recorder-core | js 录音 mp3 wav ogg webm amr 格式 |
js-audio-recorder | html5 js 浏览器 web端录音 |
live2d | live2d任务模型渲染引擎 |
op-rec | 利用现代浏览器所提供的强大 API 录制,回放并保存任意界面中的用户操作 |
photoswipe | 适用于移动和桌面的JavaScript图片库 |
viewerjs | 图像查看器 |
wavesurfer.js | 基于 Web Audio 和 Canvas 构建的可导航波形 |
wfplayer | 音频波形生成器 |
文件处理 - (上传,保存和处理文件是那么轻松
)
包名 | 作用 |
---|
simple-uploader.js | 支持多并发上传,文件夹、拖拽、可暂停继续、秒传、分块上传、出错自动重传、手工重传、进度、剩余时间、上传速度等特性 |
@flowjs/flow.js | 通过 HTML5 文件 API 提供多个同步、稳定、容错和可恢复/可重启的文件上传 |
@uppy/core | 开源的javascript文件上传器 |
@zip.js/zip.js | 用于在浏览器和 Deno 中压缩和解压缩文件的 JavaScript 库 |
clipboard | web剪贴板处理插件 |
compressorjs | 图像压缩器 |
copy-to-clipboard | 使用JS将内容从浏览器复制到剪贴板 |
cropperjs | 图像裁剪器 |
croppr | 轻量级的、很棒的、绝对零依赖的原生 JavaScript 图像裁剪器 |
dom-to-image | 使用 HTML5 画布从 DOM 节点生成图像 |
dropzone | 推拽上传组件 |
exif-js | 用于读取 EXIF 图像元数据的 JavaScript 库 |
ffmpeg.js | 带有 Emscripten 的 FFmpeg 端口,用于音频剪辑或处理 |
file-saver | HTML5 文件保存工具 |
filepond | 文件上传处理插件 |
html2canvas | 将DOM使用Canvas重新渲染生成图片 |
id3js | 用于 Node 和浏览器的 JavaScript ID3 标签解析器 |
image-conversion | 简单好用的JS图片转换工具,可以指定大小来压缩图片 |
js-export-excel | 前端导出excel表格工具 |
js-qr | 纯javascript的二维码识别库 |
qrcode | 二维码生成器 |
qrcodejs2 | 用于JavaScript的跨浏览器QRCode生成器 |
awesome-qr | 用 JavaScript 编写的有趣的二维码生成器 |
jsbarcode | 条形码生成插件 |
jspdf | 生成PDF文件 |
namedavatar | 由名称文本生成的SVG头像图片 |
soundjs | 用于处理音频的 Javascript 库 |
stackblur-canvas | 快速实现高斯模糊 |
konva | 适用于桌面/移动端应用的 HTML5 2d canvas 库 |
zrender | 二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式 |
验证安全 - (安全的网站建设是第一大问题
)
包名 | 作用 |
---|
crypto-js | 加密标准的JavaScript库 |
SparkMD5 | 前端MD5校验加密工具 |
miao-lang | 喵语翻译:将人类语言翻译为喵语言 |
unescape | 将 HTML 实体转换为 HTML 字符,例如> => > |
uuid | 生成唯一ID |
拖拽 - (页面元素并非死的,它有时可以动起来
)
包名 | 作用 |
---|
@shopify/draggable | JavaScript 拖放库 |
sortablejs | 适用于现代浏览器和触摸设备的可重新排序的拖放列表 |
内容模拟 - (假数据、假接口一切都可以伪造
)
包名 | 作用 |
---|
ajax-hook | 拦截浏览器由 XMLHttpRequest 发出的 AJAX 请求 |
chance | 随机内容生成助手 |
loremIpsum | 生成占位符文本的模块,可生成段落、词、句子 |
mockjs | 模拟数据生成器 |
模板引擎 - (无论前端和后端都可以试试模板的便利
)
包名 | 作用 |
---|
art-template | 模板引擎 |
dot | 适用于nodejs和浏览器的最快+简洁的javascript模板引擎 |
表单 - (还有比这更平常不过的需求么
)
包名 | 作用 |
---|
async-validator | 验证表单异步器 |
validator.js | 在 JavaScript 中为 Node 和浏览器提供强大的对象和字符串验证 |
yup | 简单的对象验证器 |
移动端 - (小小的屏幕有大大的精彩
)
包名 | 作用 |
---|
fastclick | 消除使用触摸UI的浏览器的点击延迟 |
hammer.js | 用于多点触控手势的 javascript 库 |
alloyfinger | 用于网络的超小尺寸多点触控手势库 |
phy-touch | 丝般顺滑的触摸运动方案 |
@better-scroll/core | 移动端滚动插件 |
eruda | 移动浏览器的控制台 |
vconsole | 一个轻量、可拓展、针对手机网页的前端开发者调试面板 |
interactjs | 适用于现代浏览器(以及 IE9+)的 JavaScript 拖放、调整大小和多点触控手势 |
iScroll | 移动端滚动插件,完成了惯性滚动和回弹效果 |
mescroll.js | 精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器 |
可视化 - (花里胡哨的显示数据
)
包名 | 作用 |
---|
@antv/g6 | 图形可视化框架 |
chart.js | 使用Chart.js构建美观的图表所需的一切 |
chroma-js | 用于各种颜色操作的 JavaScript 库 |
tinycolor | 快速小巧的颜色处理器 |
color-js | 用于 javascript 的颜色管理 API |
d3 | Data-Driven Documents,完成一系列图形绘制 |
echarts | 前端图表绘制库 |
g2 | 统计图表的高度交互式数据驱动的可视化语法 |
gsap | GreenSock 的 GSAP JavaScript 动画库(包括 Draggable) |
p5 | 一个库配上许多工具,它让编程爱好者、艺术家、设计师们可以轻松使用 JavaScript 语言进行创意编程 |
particles.js | 用于创建粒子动画的轻量级 JavaScript 库 |
canvas-nest.js | 带有 JavaScript 和 Canvas 的交互式粒子/嵌套系统 |
动画处理 - (虽然原生很好用,但是我不介意用更好用的动画方案
)
包名 | 作用 |
---|
@mojs/core | 用于 Web 的动态图形工具库 |
animejs | JavaScript 动画引擎 |
countup.js | 通过计数来动画一个数值 |
move-js | CSS3 支持的 JavaScript 动画框架 |
pixi.js | HTML5创建引擎:使用最快,最灵活的2D WebGL渲染器创建精美的数字内容 |
popmotion | 用于令人愉悦的用户界面的简单动画库 |
termynal | 使用 async/await 的轻量级和现代终端展示动画 |
threejs | 动画处理库 |
@tweenjs/tween.js | 动画补间引擎 |
velocity-animate | 加速 JavaScript 动画 |
vivusv | 在 SVG 上制作绘图动画的 JavaScript 库 |
富文本 - (让你的网站用户上传更漂亮的文本
)
包名 | 作用 |
---|
@ckeditor/ckeditor5-build-classic | 高级富文本编辑器,支持多人协同工作 |
@toast-ui/editor | Markdown所见即所得编辑器 |
ckeditor | 最好的企业级所见即所得富文本编辑器 |
codemirror | 代码编辑器 |
editor.md | 开源可嵌入在线Markdown编辑器 |
markdown-it | Markdown解析器 |
marked | markdown文档渲染器 |
monaco-editor | 基于浏览器的代码编辑器 |
tinymce | 富文本编辑 |
vditor | 浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模 |
wangEditor | 轻量级web富文本编辑器 |
网站交互 - (强大的交互让用户可以轻松浏览网站
)
包名 | 作用 |
---|
@docsearch/js | 将搜索添加到文档的最简单方法,类似vue官网搜索 |
driver.js | 页面分步引导 |
fastscan | 通过ahocorasick算法快速进行文本搜索 |
fuse.js | 轻量级模糊搜索 |
swiper | 常用于网站的内容触摸滑动 |
fullpage.js | 全屏切换插件 |
pageswitch | 适用场景为全屏切换,即一切一屏,并且在此基础上实现了超过一百种切换效果 |
touchslider | 幻灯slider效果 |
tippy.js | 工具提示、弹出框、下拉菜单和菜单库,Tooltip, popover, dropdown, and menu library |
@popperjs/core | 定位提示和弹出框工具 |
gridmanager | 表格控件,支持多种开发环境 |
handsontable | 带有电子表格外观的 JavaScript 数据网格 |
headroom.js | 为页面顶部多留些空间,在不需要页头时将其隐藏 |
prismjs | 轻量级、健壮、优雅的语法高亮 |
highlight.js | 具有语言自动检测功能和零依赖关系的JavaScript语法高亮 |
intro.js | 轻量级、用户友好的用户步骤引导库 |
js-web-screen-shot | web端自定义截屏(原生JS版) |
jsplumb | 绘制工作流程图表等等 |
nprogress | 显示顶部进度条插件,如YouTube,Medium等 |
panzoom | 通用平移和缩放库(DOM、SVG、自定义) |
screenfull | 跨浏览器使用 JavaScript Fullscreen API 的简单包装器 |
print-js | 一个用于帮助从网络打印的小型 javascript 库 |
wowjs | 向下滚动页面时显示 CSS 动画 |
scrollmagic | 用于神奇滚动交互的 javascript 库 |
scrollreveal | 当元素滚动到视图中时动画元素 |
spin.js | 旋转活动指示器 |
web-highlighter | 用于在任何网站上突出显示和持久化文本的非运行时依赖库 |
web-vitals | 健康网站的基本指标测量器 |
xterm | A terminal for the web |
实用工具 - (自己封装不如直接拿来
)
包名 | 作用 |
---|
console.table | 添加 console.table 方法,将对象数组打印为控制台中的表格 |
console-ban | 禁止 F12 / 审查开启控制台,保护站点资源、减少爬虫和攻击的轻量方案,支持重定向、重写、自定义多种策略 |
jdetects | 检测 DevTools 是否打开 |
devtools-detect | 检测 DevTools 是否打开及其方向 |
devtools-detector | 检测 DevTools 是否打开 |
array-move | 将数组项移动到其他位置 |
cnchar | 简体字拼音、多音字、音调、笔画数等功能 |
moment | 时间日期处理库 |
dayjs | Moment.js 的 2kB 轻量化方案,拥有同样强大的 API,时间日期处理库 |
deep-diff | 用于计算深度差异、捕获更改和跨对象应用更改的 Javascript 实用程序 |
dom-iterator | 功能丰富、经过良好测试的迭代器,用于遍历 DOM 节点 |
element-resize-detector | 优化了元素的跨浏览器大小调整侦听(监听)器 |
chai | 可与任何测试框架配对的断言框架 |
web-storage-cache | 对localStorage 和sessionStorage 进行了扩展,添加了超时时间,序列化方法 |
good-storage | 存储库,它使用相同的API支持sessionStorage和localStorage |
localforage | 离线存储,改进。使用简单但功能强大的 API 包装 IndexedDB、WebSQL 或 localStorage |
humanize-string | 将驼峰化/破折号/下划线字符串转换为人性化字符串:fooBar-Baz_Faz → Foo bar baz faz |
immer | 通过改变当前状态来创建下一个不可变状态 |
immutable | 不可变的持久性数据收集,可提高效率和简便性 |
updeep | 以声明性和不可变的方式轻松更新嵌套的冻结对象和数组 |
js-cookie | 轻量级浏览器端cookie操作库 |
lazyload | 图像懒加载 |
vanilla-lazyload | 轻量级、灵活的脚本,它通过将折叠下的图像、背景、视频、iframe 和脚本的加载推迟到它们进入视口的时间来加速您的网站 |
xe-utils | javascript 函数库、工具类 |
lodash | 一个一致性、模块化、高性能的 JavaScript 实用工具库 |
underscore | JavaScript实用库,提供了一整套函数式编程的实用功能 |
mitt | 微小的 200 字节功能事件发射器/发布订阅 |
numeral | 用于格式化和操作数字的 javascript 库 |
omit.js | 实用程序功能,用于创建删除了某些字段的对象的浅表副本 |
pluralize | 根据计数将任何单词复数或单数化 |
prettier | 格式化显示漂亮的代码 |
qs | 用于对URL参数进行解析 |
rxjs | JavaScript的反应式编程库 |
stringify-object | 字符串化一个对象/数组,比如 JSON.stringify 只是没有所有的双引号 |
await-to-js | 异步等待包装器,无需 try-catch 即可轻松处理错误 |
big.js | 用于任意精度十进制算术的小型、快速 JavaScript 库 |
virtual-dom | 虚拟 DOM 和差异算法 |
作者:SystemLight
链接:https://juejin.cn/post/7024419322290257950