推荐库

太常用的一些库,比如 lodash、axios、echarts、normalize.css等就不再下面推荐了。这里主要推荐一下自己平时常用,提高效率的,但大家可能又不知道的一些库。

前端常用

  • sweetalert2 一个自适应,且自定义性强的弹出框(零依赖)

  • https://bower.io/ 管理web库

  • 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 奇舞团出的跨平台绘图对象模型

  • workbox - 让你的网站更方便的变成 pwa

  • 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

    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

  • matter-js web 物理引擎

  • micron 通过在元素上绑定属性从而实现动画效果的库

  • direction-reveal 根据鼠标进入位置,展现从不同方向 展现 hover 效果

  • laxxx 滚动特效库 轻量级 压缩完 2kb

  • cssfx 优雅的 CSS 动画效果,开箱即用

  • zdog 3D engine 引擎

    Vue

  • vue-multiselect select 组件 目前 vue 里面用过最好用的

  • Vue.Draggable DnD 拖拽组件 基于 Sortable.js 的 vue 版本

  • vue-sauce 一个可以展示 vue 源码的指令

  • vue-smooth-dnd Vue wrappers components for smooth-dnd

  • vuegg 一个 vue 可视化拖拽界面生成器

  • vee-validate 基于 vue 的验证,能验证的内容比较全

  • vuesax 一个很漂亮的基于 vue 的 ui 框架

  • vue-analytics 基于 vue 的 谷歌统计封装

  • vue-virtual-scroller 基于 vue 的虚拟列表无限滚动

  • vue-content-placeholders 页面龙骨 skeleton

    实践库

  • 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

    Node

  • consola 优雅的命令行 console vuepress 也使用了它

  • cheerio - 用类 jQuery 语法处理 HTML

  • chokidar - node 监听文件变化的库

  • fs-extra - fs-extra 模块是系统 fs 模块的扩展,提供了更多便利的 API,并继承了 fs 模块的 API

  • rimraf - 删除文件

  • globby - 用于模式匹配目录文件

  • glob - 文件查找

  • tiny-glob - 文件查找

  • node-semver - node 版本验证库

  • npm-run-all - 一个 CLI 工具可以并行或者串行执行 script

  • live-server - 一个简单的 http server 带有 reload 功能

  • node-portfinder - 一个端口嗅探工具

  • update-notifier - Update notifications for your CLI app. cli 升级提醒工具

  • y18n - yargs 基于 i18n 的一个包

  • signale - Hackable console logger 一个 Node 的日志格式库,自带 16 个级别,可以定制颜色和 Emoji

  • execa - A better child_process

  • listr - Terminal task

  • commander.js - 自动的解析命令和参数,合并多选项,处理短参,等等,功能强大,上手简单

  • Inquirer.js - A collection of common interactive command line user interfaces. 命令行询问库

  • enquirer - 命令行 prompt 询问库,写 cli 的时候很有用

  • Qoa 同上

  • ora - Elegant terminal spinner 命令行 loading

  • chalk - 命令行着色美化库

  • hygen - 快速方便的创建代码 可以命令行创建预设的 template

  • ndb - node 调试

  • got - http 请求库 如果你觉得 request 太多的话 这是一个不错的选择

  • dumper.js - 能让你的 node console 更加的规整,方便调试

  • node-in-debugging - node.js 调试指南

  • node-best-practices - node 最佳实践

  • fastscan - node 敏感词库

  • fx - 命令行优化 JSON 输出

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

  • progress-estimator - 命令行 progress bar 进度条模拟库

  • Node.js 最佳实践

  • grpc-web - 前端直连 gRPC 服务

  • node-fetch - node 环境下轻量级 fetch 请求库

  • ink 是一个 React 的命令行渲染器,命令行界面可以像写页面那么写了

  • strapi 开源的解决方案来创建、部署和管理自己的 API

  • listr Terminal task list

  • dotenv 通过.env 设置环境部变量 vue-cli 也依赖它

    GraphQL

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

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

    有趣

  • the-bread-code - 使用程序员的思维制作面包 ,比如制作中使用 A/B test, 来比较那种做法更好。

  • build-your-own-x - 教你用各种语言实现 Bot Database Neural Network

  • javascript-algorithms - 教你用前端知识认识各种算法

  • not-paid - 如果你给人做网站,交过去以后对方没有付款,那么这个 JS 会把网站的透明度一天调低一点,直到看不见

  • nsfwjs - 前端图片鉴黄,基于 Tensorflow

  • elevator.js 我很喜欢的一个库,让一个 back-to-top 的效果有了一种坐复古电梯的感觉

  • app-ideas 很多年轻人苦于缺少练手的项目,这个项目收集了不少点子,每个点子都有明确的目标和复杂资源。

  • WebGL-Fluid-Simulation 很酷的 WebGL 交互

    工具

  • high-speed-downloader - 百度网盘不限速下载 支持 Windows 和 Mac

  • hyper - 前端命令行

  • yapi - 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台

  • sway - 一个微软自己出的在线 ppt 很强大

  • bigjpg - 放大图片的神器 通过神经网络可以放大图片并能降噪

  • Ascii Art Generator - 在线生成 Ascii 图案

  • Winds - 开源 RSS

  • JSUI - 一个用来控制管理前端项目的客户端

  • docz - 让你能快速写文档的一个库

  • hiper - 性能统计分析工具

  • verdaccio - 私有 npm

  • git-guide - git 入门指南

  • git-tips - git 进阶

  • bit - 实现了项目之间的代码共享 可以自建私有

  • simpread - 简悦 ( SimpRead ) 让你瞬间进入沉浸式阅读的扩展

  • mkcert - 一键命令 让本地也支持 https

  • termtosvg - 录制 命令操作转成 svg 基于 python

  • gh-polls - 可以在 github issue 中添加投票

  • eruda - 移动端调试工具

  • vConsole - 也是一个移动端调试工具 腾讯出品

  • terminalizer - 命令行录制工具 基于 node

  • badgen - 快速构建和 shields 一样的 svg badge 但速度更快

  • readability - 移除页面非正文部分 基于 jsdom

  • WeChatPlugin-MacOS - 一款功能强大的 macOS 版微信小助手

  • puppeteer-recorder - 一个 chrome 插件 能够根据你的操作 自动生成 puppeteer 相关代码

  • mdx-deck - 用 markdown 编写演示文稿

  • code-surfer - 基于 mdx-deck 的一个插件 让你更好的在文稿中展示 code

  • Progressive Tooling - 前端性能优化工具集合

  • https://github.com/artf/grapesjs - 可视化建站工具 不需要写代码就能写一个页面,前端再次再次要下岗了

  • image-charts - 该服务通过 URL 接受参数,然后生成图表,以图片形式返回

  • eagle.js - 一个用 vue 来制作 PPT 的库

  • Optimizely - A/B Test

  • appadhoc - 一个国内的 A/B Test 服务

  • glorious-demo - 通过编写代码的方式构建一个命令行的演示例子

  • nginxconfig - 可视化配置 nginx 提供了多个基础模板

  • bundlephobia - 一个可以查看某个库的大小,并且分析它的依赖

  • jsperf - 一个提供在线 test case 的网站,主要用来比较性能。可以比较如: forEach vs for 的性能

  • perflink 与 jsperf 类似的一个比较 js 性能的网站

  • algorithm-visualizer - 算法代码可视化

  • An-English-Guide-for-Programmers - 专为程序员编写的英语学习指南

  • Webhint - 用于检查代码的可访问性、性能和安全的开源检查(Linting)工具

  • airtap - 测试浏览器兼容性,可覆盖 800 多种浏览器

  • jsonstore - 供免费,安全且基于 JSON 的云数据存储,自己玩的小项目神器

  • git-history - 可视化查看一个文件的历史变化

  • x-spreadsheet 一个基于 Canvas 的 JS 电子表格库 excel

  • imgcook 阿里出品,一键通过设计稿生成代码

  • majestic jest 可视化

  • leon 你开源项目的 ai 个人助手

  • js-code-to-svg-flowchart 将代码逻辑用流程图的方式展现出来

    Webpack

  • webpackbar webpack 打包进度可视化

  • jarvis webpack dashboard

  • webpack-chain 通过 chain 风格 api 的方式修改 webpack 配置

  • speed-measure-webpack-plugin 探测 webpack 各阶段的耗时

  • obsolete-webpack-plugin 基于 browserslist 做浏览器升级提示

  • mini-css-extract-plugin 提取 CSS 为单独文件

  • copy-webpack-plugin 复制额外的文件到输出目录

  • duplicate-package-checker-webpack-plugin 检查是否存在重复依赖

    Mac

  • get-plain-text - 能清除剪贴板里的格式 很实用

  • IINA - mac 平台感觉免费最好的播放器 强推

  • magnet - 分屏管理

  • Xnip - 方便好用的截图工具-支持截长图

  • Spectacle - 窗口管理工具

  • vanilla - 顶栏图标管理工具

  • Dozer - 一个开源的顶栏管理

  • 腾讯电脑管家 - 反正我用下来好觉得蛮好用的

  • mos - 鼠标平滑滚动软件,很好用。免费开源

  • sequel pro - mysql 客户端 好用

  • Microsoft Remote Desktop Beta - Mac 远程登录 Windows 调试神器

  • pap.er - 专为 Mac 设计的壁纸应用

  • The Unarchive - Mac 目前感觉最好用的免费解压软件

  • Tickeys - 让你用 Mac 键盘也能打出机械键盘的感觉

  • Beaker Browser - P2P 开源浏览器 支持点对点发布文件,成为了文件传输工具,支持 DAT 对等协议

  • Gifski - 视频转 gif 工具

  • more - 更多优秀的 mac app 介绍

  • Motrix - 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具

    Chrome 拓展

  • Tampermonkey 油猴 神器

  • 扩展管理器 轻松管理扩展,就不用担心安装太多扩展了

  • visbug 它可以帮助你改变 css,移动元素等等一系类强大的功能,页面调试神器。当然有些时候还是 DevTools 更好用

  • refined-github 优化 github 默认功能和样式的 chrome 插件

  • ADB chrome 真机调试安卓神器

  • Adblock Plus 免费广告拦截程序 这个应该不用说了,装机必备

  • Axure RP Extension 看原型必备

  • JSON Formatter JSON 格式化 程序员必备

  • Lighthouse 谷歌出品,检查网页综合性能评分,分析不足

  • 二维码(QR 码)生成器 手机扫码神器

  • Octotree github 上看代码必备神器

  • OctoLinker 能在 github 上看代码的时候 快速链接跳转到依赖的库

  • The Great Suspender chrome 太吃内存了,当页面开的很多时候会很卡,它就完美的解决了这个问题。它将几分钟没浏览过的页面都挂载了,当你想看是再重新加载

  • WEB 前端助手 支持 JSON 格式化、二维码生成与解码、代码压缩、Markdown 与 HTML 互转、网页滚动截屏、正则表达式、时间转换工具、JSON 比对工具等

  • 掘金 目前我默认新开 tab 的默认页,可以刷刷新的文章或者项目,还不错。

  • 沙拉查词 划词翻译插件

  • npmhub在 README 下方显示 npm 依赖信息

    #VS Code

  • Import Cost 查看你引入的依赖模块大小

  • Auto Close Tag 自动补全 html 标签,如输入将自动补全

  • Auto Rename Tag 自动重命名 html 标签,如修改,将自动修改结尾标签

  • polacode 生产代码图片快照插件

  • vscode-leetcode - 一个能让你在 vscode 中刷 LeetCode 的插件 算一个划水神器吧

  • vscode-icons VS Code 必备吧,为文件添加炫图标

    工程

  • lerna - monorepo 管理。

  • lerna-changelog - 为 lerna 项目自动生成 changelog。

  • eslint - JS 风格约束。

  • eslint-config-airbnb

  • xo - 封装自 eslint。

  • prettier - 更主观的风格自动修改。

  • yeoman-generator - 脚手架工具。

  • serve - 本地静态服务器。

  • np - npm publish 辅助,自动 push、打 tag、升版本等。

  • lint-staged - eslint 提速,只 lint 提交的代码。

  • coveralls - 覆盖率。

  • husky - 添加 git hooks。

  • cross-env - 跨平台的环境变量声明。

  • projj - 本地 git 项目管理,支持 github 和 gitlab。

  • nvm - 管理 node 版本。

  • concurrently -在 npm scripts 里并行执行命令。

  • @zeit/ncc - 打包为 npm 包为一个文件。

  • npm-check - 检测依赖升级情况,我会和 yarn upgrade-interactive 配合着用,主要用来检测冗余依赖。

  • cpx - 复制,支持 glob,并且可以 watch。

  • onchange - 监听文件变动然后做一些事。

常看的网站