浏览器端开发的常用第三方库，大前端必备!
无环境依赖的库
兼容补丁 - (让你的代码在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
