好用的库与框架推荐

[yanlele]

好用的库总结

• 工具函数
• web工具
• React
• node
• 项目体系
• 其他

工具函数

• 工具函数: ramda **
• 函数式编程函数: fp-ts
• 格式化和处理数字: Numeral-js
• 浅对比: shallowequal
• 遍历工具： js-traverse **
• 数字转中文（大写，小写）数字，金额: nzh **
• 将数组项移动到不同的位置: array-move
• 处理小数计算精度问题: decimal.js
• licia: 常用工具库收集

web工具

• 轻量级页面引导库: driver.js
• 字体操作库，使用它你可以随心所欲的操作字体: font-carrier
• 基于 web 的左右拖动分栏Split: split
• 辅助UI控件开发的工具: storybook
  • 手把手教你快速搭建专属的storybook
  • Storybook 中文手册 React 版
  • Code for Learn Storybook **
  • learnstorybook.com
• 锚点滚动：smooth-scroll
• js动画库: anime **
• dom节点滚动: dom-scroll-into-view
• 平滑滚动: scroll-into-view-if-needed
• EventEmitter
• 元素大小变化监听：element-resize-detector **
• element 大小变化监听：ResizeObserver
• 文件下载和提取: download
• 异步表单校验(antd 就是用的这个): async-validator
• 懒加载图片、背景、视频、iframe和脚本 **
• web端的代码展示器， 非常的强大：CodeMirror **
• 图片分析和比较: Resemble.js
• 复制粘贴实现模块: copy-to-clipboard
• canvas库: fabric.js
• 渐进式Canvas库: easycanvas(作者貌似已经停止维护了，谨慎使用，可以作为学习使用)
• 本地存储工具: localForage **
• 伟大的项目国际化解决方案: i18next **
• 输入时格式化工具: cleave.js **
• 文件保存到本地: FileSaver.js
• 汉字拼音 ➜ hàn zì pīn yīn: pinyin **
• url 处理工具: query-string **
• H5唤起客户端：callapp-lib
• 虚拟dom和diff算法实现: virtual-dom
• diff 实现: diff **
• 前端本地客户端压缩图片，兼容IOS，Android，PC、自动按需加载文件: localResizeIMG
• 轻量级动画库: popmotion **
  • Popmotion —— 流动你的页面
  • popmotion 中文文档
• 文档生成器: vuepress
• 通过markdown构建文档：bisheng（antd就是用的这个）
• 文档生成器：docsify
• 网页加载进度条: nprogress
• 手势操作：hammer
• 用于匹配url的正则表达式: url-regex
• 非常棒的 Tooltip, popover 工具: tippyjs
• 二维码生成工具: qrcode-generator
• 时间处理库: luxon
• 将路径字符串(如' /user/:name ')转换为正则表达式: path-to-regexp
• json编辑器： jsoneditor
• 身份证验证: IDValidator
• js截屏工具: html2canvas
• 颜色转换和操作库: color
• 为web轻量级复制到剪贴板: clipboard-copy
• 现代复制到剪贴板: clipboard.js
• selecto: 好用的滑动拖拽选择库
• tailwindcss: 原子化 css
• fast-diff: A fast Javascript string diff
• xss库: js-xss
• xss库: sanitize-html
• Async await wrapper for easy error handling without try-catch: await-to-js
• Map object keys and values into a new object: map-obj
• typing.js: 一款非常好用的js打印机效果插件，能够直接复制文本原样打印输出
• TheaterJS: 一款十分优秀的打字机效果插件
• swiper
• countUp.js: 计算数字的前端动画组件
• mobile-detect: 通过UA设备识别, 获取设备信息
• isMobile: 判定是否是移动端
• ua-parser-js: 通过UA设备识别, 获取设备信息
• minimist: 处理 node 命令行调用参数
• jsonschema: JSON Schema 验证
• render-html-to-pdf: html转成pdf,下载
• howler: JavaScript音频播放库
• parameter: 参数校验模块
• Dexie.js:A Minimalistic Wrapper for IndexedDB
• 客户端生成二维码:jrQrcode
• Safely and quickly serialize JavaScript objects
• 深度递归合并JS对象
• 深度递归对比JS对象

React

• ahooks **
• 又是一个伟大的Hooks库: react-use **
• 拖动排序：react-sortable-hoc **
• 在React中用于抓取、缓存和更新异步数据的hooks: react-query
• 基于 React 的左右拖动分栏Split: react-split-pane
• 响应组件，有效地呈现大型列表和表格数据: react-window **
• 虚拟渲染： react-virtualized **
• url绑定的锚点滚动：react-scrollable-anchor
• 渐进渐出动画: react-transition-group
• css in js 的一个大杀伤力器: styled-components
• 3D轮播：react-carousel-3d
• 虚拟渲染 - 用于解决大型列表和表格数据: react-virtualized
• 自定义 scrollBar 的React版本实现: react-perfect-scrollbar
• 文本代码比较组件: react-code-diff
• react版本的代码展示器实现: react-codemirror2
• D3的react封装：react-d3-library
• 复制粘贴的React封装实现: react-copy-to-clipboard
• 状态管理: rematch **
• 树形结构展示: react-treebeard
• json 预览: react-json-view
• 状态管理: dva **
• threejs 的 react 封装: react-three-fiber
• 做表单的： formik
• html header 管理工具: react-helmet
• 基于spring物理的React动画库: react-spring
• react 拖动组件: react-draggable
• React hooks for axios: axios-hooks
• 一个基于spring物理的React动画库: react-spring
• 类似于 react hook 组件级别的封装： react-powerplug (已经没有人维护了)
• 文本编辑器：draft-js **
• 美观易用的React富文本编辑器，基于draft-js开发: braft-editor
• react-sticky
• react-hooks: Collection of react hooks
• Runtime type system for IO decoding/encoding: io-ts
• Create PDF files using React

node

• 打包node程序为可执行文件: pkg
• 运行跨平台设置和使用环境变量: cross-env
• 一个简单的本地服务: http-server
• 用于mock数据用的， 配合 dev-server.proxy, 简直无往不利: dyson **
• 爬虫必备神器: cheerio
• 优雅的terminal spinner: ora
• terminal 交互式命令行工具: Inquirer.js **
• node 模板引擎整合库: consolidate.js **
• terminal 开始有色彩了: chalk **
• prompt
• glob functionality for node.js
• 命令行工具: commander
• Create, read and edit .zip files with Javascript
• 读取递归目录的路径模块: recursive-readdir
• 将glob表达式转换为JavaScript RegExp对象:minimatch
• 服务端生成二维码:qr-image
• Download and extract a git repository (GitHub, GitLab, Bitbucket) from node.
• yargs the modern, pirate-themed successor to optimist.
• 启动本地文件服务的一个模块serve

项目体系

• Create a Vite-powered app in seconds: create-vite-app
• 自动提取markdown目录的工具
• E2E 的伟大集成者: cypress
• 按需导入 - antd 的伟大衍生物: babel-plugin-import
• 代码格式化工具: prettier
• 帅气的 Webpack仪表盘: jarvis
• A loader for webpack that allows importing files as a String： raw-loader
• Transforms styleName to className using compile time CSS module resolution: babel-plugin-react-css-modules

其他

• Generate hashes from javascript objects in node and the browser: object-hash
• 加密库： jsrsasign
• 加密库: crypto-js
• flex小游戏
• markdown 文档 --> ppt: nodeppt
• markdown 文档 --> ppt: vue-mark-display
• 基于markdown的演示幻灯片: Slidev
• 动态文件生成器: docsify
• 演示框架: impress.js
• electron-react-tpl
• 这些开源项目，让你轻松应对十大工作场景
• redis客户端工具: AnotherRedisDesktopManager
• html5游戏引擎: egret-core
• 键盘控制工具: Karabiner-Elements
• 控制应用缩放 - 眼镜: Spectacle allows you to organize your windows without using a mouse.
• syncd是一款开源的代码部署工具
• 磁力链接聚合搜索
• 使用jetbrains
• github profile template