前端常用框架或库收集整理

前端常用框架或库收集整理

webcomponent

• hybrids webcomponent 组件定义库，api简洁好用 https://www.npmjs.com/package/hybrids

React 常用组件

• react-use 常用的自定义 hooks 合集
• react-hook-form 最常用 react 表单处理hooks，用来做表单验证处理，提交等
• react-cool-img react图片懒加载
• react-cool-inview react元素块内容进入页面可视区域监听组件，类似于
• react-dnd 拖放效果组件
• react-sortable-tree 可以排序的树形组件
• @uiw/react-md-editor md 编辑器，可以自定义控件，如上传等
• shepherdjs 网站新手引导框架 也有react 组件 https://shepherdjs.dev/docs/
• react-files-uploading react 文件上传组件 https://www.npmjs.com/package/react-files-uploading
• react-images-uploading react 图片上传组件 https://www.npmjs.com/package/react-images-uploading
• react-intersection-observer react 图片和dom懒加载 https://github.com/thebuilder/react-intersection-observer
• react-share 网站分享快速生成按钮和图表的组件
• 鼠标特效库 https://cursify.vercel.app/components/spotlight-cursor

NodeJs

• cheerio 用jquery语法来解读提取html文本内容的爬虫内容分析库
• ora 命令行loading工具
• consola 命令行人机交互输入工具，可以异步执行多个输入，单选，多选，确认 操作
• commander 命令行工具，注册命令，指定命令的说明，可选参数，以及要执行的代码，一般配合上面的 consola 来实现命令行工具
• sharp 图片合成和处理工具，可以修改图片大小，滤镜，网图片上加文字，图片等

UI 组件库

• ElementUI vue 框架使用最多的组件库
• Framework7 支持所有主流前端框架，三端都有组件库

JS 绘图

• jsplumb 拓扑图绘制框架
• fabricjs canvas库，支持画图，绑定操作，事件等，让canvas变简单
• leafer.js 国产 canvas库，支持画图，绑定操作，事件等，让canvas变简单
• ECharts 不用多说，无人不知，无人不晓
• Cytoscape.js 主要用来画连线图，如关系图谱

JS 动画

• Tween.js 一个简单的 JavaScript 补间（比如css3的ease-in）动画库
• Snap.svg 绘制svg的类库，超级简单方便的api
• Anime.js 类似jquery和jquery-ui的动画库，直接操作dom
• waypoint.js jquery监听dom进入浏览器可是窗口区域插件
• parallax.js 视距差效果

JS工具函数

• html-to-text 将html内容转换成纯文本去除富文本内容
• 字符串格式处理工具，支持多层级处理驼峰，下划线，大驼峰等的转换 https://www.npmjs.com/package/humps

音视频相关

• webm-muxer/mp4-muxer 音视频录制并生成视频工具库 https://www.npmjs.com/package/webm-muxer
• js-audio-recorder https://www.npmjs.com/package/js-audio-recorder 音频录制，支持录制时的声波显示等，非常强大

代码编辑器

• Ace editor Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。作为与codemirror同类的现代编辑器，ACE同样拥有mode进行语法解析，实现编辑器的智能感知型功能。
• CodeMirror 是一个用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并附带一些实现更高级编辑功能的语言模式和插件。其核心仅提供编辑器功能，其他功能通过丰富的API和插件实现。CodeMirror的使用基于特定的程序语言模式(mode)，它对特定的语言进行语法解析(parse)，使编辑器能够在解析结果基础上进行语法高亮，实现具有上下文感知(context-aware)的代码补全、缩进等功能。
• monaco editor monaco是VS Code的代码编辑器，同时也是一个开源代码编辑器，可以嵌入到Web应用程序中
• xterm.js 快速实现网页版的命令行工具，支持快速创建ws连接到服务器

常用命令行工具

• yalc 将本地开发的npm包管理起来，其他项目可以快速本地调试它，类似 npm link
• mole mac电脑清理和管理工具
• cloc 代码行数统计，可以统计目录，支持很多种语言
• jq 解析json对象的文本内容，摒弃传统的正则匹配

写文档的框架

• vitepress vue官网文档的写作工具
• dumi 阿里的文档编写打包工具
• docsify 可以不用build，直接将md加载成html文档
• storybook 写文档的基础上，可以加入demo内容，类似ant组件使用文档

社区整理常用库

• 10个按钮特效 http://www.adobeedu.com/%E8%BF%9910%E4%B8%AA%E6%8C%89%E9%92%AE%EF%BC%8C%E6%8A%8A-css-hover-%E7%9A%84%E5%88%9B%E6%84%8F%E5%8F%91%E6%8C%A5%E5%88%B0%E6%9E%81%E8%87%B4%E4%BA%86/
• HTML5+CSS3 最酷的 loading 效果收集 https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html

网站评论或留言平台

• cudis 简单的留言工具，可以使用官方接口，也可以自己部署 https://cusdis.com/
• artalk https://artalk.js.org/ 支持递归评论，讨论内容，开源免费下载本地部署
  上面两个都是全免费的
• Remark42 https://remark42.com/demo/ 和上面的一样，可以嵌套评论，需要登录，支持常见的三方登录
• Disqus 家喻户晓了，但是有广告，不想广告就付费
• Utterances https://utteranc.es/ 完全基于github issue系统的评论系统，只支持github登录