我的 Github 常购清单.
- ⭐️ 推荐
- 👀 关注
- 💵 付费
- 😝 恶搞
唯星主义者, 排名分先后.
-
⭐️ vitejs/vite Next generation frontend tooling. It's fast!
快. 配置简单, 3~5 行配置就可以开始写 React 项目, 默认配置无需调整即可满足大部分需要.
-
⭐️ privatenumber/esbuild-loader ⚡️ Speed up your Webpack build with esbuild
Webpack esbuild loader. 当你的项目必须使用 webpack 构建时, 使用 esbuild-loader 可以显著提高性能, 尤其是代码压缩比 terser 快 10 倍以上.
-
⭐️ welldone-software/why-did-you-render why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
https://medium.com/welldone-software
排查组件渲染的 babel 插件. 作者的文章对优化性能有帮助.
-
👀 evanw/esbuild An extremely fast JavaScript and CSS bundler and minifier
非常快的 js 编译打包压缩工具. 使用 Go 编写, vite 和 esbuild-loader 的基础, 一般不直接使用.
-
👀 swc-project/swc swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript.
非常快的 js 编译工具. 使用 Rust 编写, 目标是替代 babel.
-
snowpackjs/snowpack ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️
时髦轻量级的打包工具. 对标 vite.
-
⭐️ developit/microbundle 📦 Zero-configuration bundler for tiny modules.
聪明小巧的包开发构建工具. 基于 rollup 2, 配置极简, 你在 package.json 里面写明包的入口 main/module/exports 路径, 它就知道该用什么格式生成这些对应的文件. 缺点也是极简, 定制选项少.
-
jaredpalmer/tsdx Zero-config CLI for TypeScript package development
TypeScript 包开发构建工具. 基于 rollup 1, 有些落伍 来自于 formik 作者. 输出的结果类似于 react, 会按环境分成
.cjs.production.js
和.cjs.development.js
两份文件.
-
⭐️ bvaughn/react-window React components for efficiently rendering large lists and tabular data
虚拟滚动列表. 高度抽象, 不提供 UI.
-
⭐️ Lodin/react-vtree React component for efficiently rendering large tree structures
https://lodin.github.io/react-vtree/
基于 react-window 实现的虚拟滚动树形列表. 使用 generator function 作为数据源.
-
⭐️ casesandberg/react-color 🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
http://casesandberg.github.io/react-color/
颜色选择器. 外观上模拟常见的软件.
-
⭐️ uNmAnNeR/imaskjs vanilla javascript input mask
文字格式 mask. 用于需要把文字强制显示成某种格式, 例如千分位.
-
⭐️ react-monaco-editor/react-monaco-editor Monaco Editor for React.
源代码编辑器. VSCode 的内核.
-
⭐️ mac-s-g/react-json-view JSON viewer for react
https://mac-s-g.github.io/react-json-view/demo/dist/
显示 JSON 树形数据.
-
💵 ag-grid/ag-grid The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
功能强大的商业化表格.
-
Autodesk/react-base-table Autodesk 出品的表格组件. 不推荐使用, 只是让你体会一下大厂的代码是如何写的.
-
⭐️ atlassian/react-beautiful-dnd Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.com/
开箱即用的拖拽组件库, 适用于 Todo/Kanban 这类应用场景. 由大名鼎鼎的 Jira 东家 Atlassian 开发.
-
👀 clauderic/dnd-kit A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
React DnD 家族后起之秀, 刻意规避 HTML5 Drag and drop API 来绕开浏览器自身限制, 这个决定导致不支持拖拽上传这类操作, 但是性能收益很明显. 注意作者坚称现在是 beta 版, 即使版本号已经是 4.0 了.
-
react-dnd/react-dnd Drag and Drop for React
http://react-dnd.github.io/react-dnd
老牌拖拽库, 当以上不能满足需求时, 可以尝试用这个实现拖拽的各种细节效果.
-
👀 react-hook-form/react-hook-form 📋 React Hooks for forms validation (Web + React Native)
反传统 hook form 状态管理. 大量使用 ref 接管用户输入, 绕过 react 状态管理, 以达到减少 render, 提高性能的目的. 对 UI 组件要求苛刻.
-
👀 alibaba/formily Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3
Form 可序列化解决方案. 包含 form 设计器和渲染器两部分, 功能十分复杂.
-
⭐️ streamich/react-use React Hooks — 👍
http://streamich.github.io/react-use
React hooks 百宝箱, 准备写 hook 前先查一下是不是已经有了.
-
⭐️ pmndrs/use-gesture 👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
https://use-gesture.netlify.app/
鼠标和触摸手势 hook.
-
immerjs/use-immer Use immer to drive state with a React hooks
基于 immer 的 useState.
-
⭐️ mobxjs/mobx Simple, scalable state management.
简单可伸缩的状态管理. React 一直不肯承认响应式数据流比单向数据流更实用, Proxy 出现后响应式数据的性能得到很大提升. 用 react 的方式渲染, 用 vue 的思维管理数据, 就是 mobx. 一个前端数据建模框架.
-
reduxjs/redux Predictable state container for JavaScript apps
这个不用介绍了吧. 很多时候你没的选.
-
👀 pmndrs/zustand 🐻 Bear necessities for state management in React
思路上与 Redux 相似, 但从
create
到useStore
显得很自然, 没有太多模板代码, 也没有那么多概念, 你可以渐进式的使用新功能. -
⭐️ tannerlinsley/react-query ⚛️ Hooks for fetching, caching and updating asynchronous data in React
https://react-query.tanstack.com/
React 加载/缓存/更新 hook. 数据加载以 query key 加以区分, 相同的 key 并发时会自动去重, 数据默认有个“新鲜度”的概念, 组件重新 mount 或窗口重新 focus 时根据“新鲜度”决定是否重新加载. 一般把它看作分布式数据管理, 在组件中调用 API, 而不必过度关心数据的形状.
-
vercel/swr React Hooks for data fetching
与 react-query 同时期理念相近的作品. 名称取自于
stale-while-revalidate
, 一个关于缓存失效策略的标准 HTTP RFC 5861. -
umijs/hox The next-generation state manager for React.
建个 model, 写个 hook, 全局共享.
-
⭐️ windicss/windicss Next generation utility-first CSS framework.
一个像 Tailwind CSS 一样的 CSS 工具框架. 快 10 倍.
-
⭐️ ant-design/ant-design An enterprise-class UI design language and React UI library
蚂蚁出品, 曾经的 React 组件库榜首(被删库前). 几乎可以满足任何需求, 组件 API 设计上同时考虑前端和后端使用, 一些 API 有独到见解. 样式上使用 less 是个败笔, 现已积重难返. 国内项目可以盲选, 国外项目想办法说服客户.
-
mui-org/material-ui MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
以 Google material design 为参照实现的第三方前端组件库. 口质和口碑极高, 样式使用自研的 css in js, 与其他技术不好搭配. 是否选择取决于设计稿.
-
👀 reach/reach-ui The Accessible Foundation for React Apps and Design Systems
https://reacttraining.com/reach-ui/
A11y 基础框架. A11y 之所以难以实现是因为与 HTML 标准之间的代沟, 学习这里面的代码能帮你更好的理解 A11y 有多少细节需要考虑.
-
👀 snackui/snackui Write once React Native + Web UI kit. Optimizing compiler that flattens views, reduces bundle size and greatly improves performance 🏎. Normalizes media queries and themes between native and web so they work optimally in both environments.
一个试图复刻 SwiftUI 的组件库. 许多坑还没有填平.
-
facebook/docusaurus Easy to maintain open source documentation websites.
Facebook 出品的文档站点生成器.
-
⭐️ ai/nanoid A tiny (108 bytes), secure, URL-friendly, unique string ID generator for JavaScript
https://zelark.github.io/nano-id-cc/
ID 生成器. 小, 快, 短, 支持自定义字母表和长度.
-
⭐️ localForage/localForage 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
https://localforage.github.io/localForage
浏览器离线存储. 让你放心的操作 IndexedDB, WebSQL, localStorage, sessionStorage, 而不必在意浏览器的版本差异.
-
⭐️ isaacs/node-lru-cache A cache object that deletes the least-recently-used items.
基于 LRU(最近最少使用)算法实现的缓存库. 接口类似于 Map, 但是允许你设置容量, 容量不足时会自动清理最近最少使用的项目.
-
⭐️ Stuk/jszip Create, read and edit .zip files with Javascript
读写 zip 文件.
-
👀 inversify/InversifyJS A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript.
基于 decorator 的 loC(控制反转)容器.
-
SheetJS/js-crc32 🌀 JS standard CRC-32 implementation
http://oss.sheetjs.com/js-crc32/
CRC32 算法.
-
Jam3/math-as-code a cheat-sheet for mathematical notation in code form
常见数学符号在代码中的表示法.
-
👀 yjs/yjs Shared data types for building collaborative software
基于 CRDT 的协作数据管理. 主打富文本多人协作.
-
amark/gun An open source cybersecurity protocol for syncing decentralized graph data.
去中心化协同图形数据库.
-
faisalman/ua-parser-js UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data. Supports browser & node.js environment.
http://faisalman.github.io/ua-parser-js
浏览器 User-Agent 检测工具.
-
hotoo/pinyin 🇨🇳 汉字拼音 ➜ hàn zì pīn yīn
-
⭐️ iamkun/dayjs ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API
日期时间库的最后胜出者.
-
👀 alpinejs/alpine A rugged, minimal framework for composing JavaScript behavior in your markup.
一个精巧的前端框架. 一个 html 文件就够了.
-
👀 micro-zoe/micro-app A minimalist solution for building micro front-end applications. 一种用于构建微前端应用的极简方案
https://micro-zoe.github.io/micro-app/
京东微前端解决方案. 特点是采用类似 WebComponent 这样的 Shadow DOM 技术实现, 尽可能减少对 host 和 app 进行改动.
-
umijs/qiankun 📦 🚀 Blazing fast, simple and complete solution for micro frontends.
蚂蚁微前端解决方案. 不是 iframe.
-
⭐️ ueberdosis/tiptap The headless editor framework for web artisans.
基于 ProseMirror 的编辑器. 提供很多易用的功能, Schema 高度可定制, 你可以配置如何保存 json, 如何解析 html, 以及如何渲染到 DOM. 对于用户交互方面处理比较方面, 如果要继续深入, 则必须先掌握 ProseMirror.
-
ianstormtaylor/slate A completely customizable framework for building rich text editors. (Currently in beta.)
一个完全可定制的富文本框架.
-
quilljs/quillQuill is a modern WYSIWYG editor built for compatibility and extensibility.🚫 不推荐. 放在这里是提醒大家 quill 作者已弃坑.
-
⭐️ axios/axios Promise based HTTP client for the browser and node.js
基于 Promise 的 http 客户端.
-
⭐️ visionmedia/debug A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
小巧的 debug log 实用工具. 自动为每个 namespace 分配不同的颜色.
-
⭐️ sindresorhus/promise-fun Promise packages, patterns, chat, and tutorials
Promise 工具集.
-
developit/greenlet 🦎 Move an async function into its own thread.
在单独线程里运行 async function. 基于 web worker.
-
⭐️ eligrey/FileSaver.js An HTML5 saveAs() FileSaver implementation
前端保存文件. 弹出下载对话框, 支持二进制, 例如把 canvas 画布保存为图片, 使用 jszip 压缩文件并保存.
-
⭐️ usablica/intro.js Lightweight, user-friendly onboarding tour library
页面向导式 onboarding 指引.
-
⭐️ popperjs/popper-core 🍿Positioning tooltips and popovers is difficult. Popper is here to help!
Tooltip & Popover. 用于解决 Tooltip 和 Popover 定位困难的问题.
-
atomiks/tippyjs Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
基于 popperjs 的更易用的实现.
-
pqina/filepond 🌊 A flexible and fun JavaScript file upload library
又漂亮又好玩的文件上传组件.
-
PrismJS/prism Lightweight, robust, elegant syntax highlighting.
代码语法高亮.
-
mathjax/MathJax Beautiful and accessible math in all browsers
渲染漂亮的数学公式.
-
airbnb/lottie-web Render After Effects animations natively on Web, Android and iOS, and React Native.
渲染 AE(Adobe After Effects)动画. 不必为如何实现设计师设计的动画而头疼.
-
szimek/signature_pad HTML5 canvas based smooth signature drawing
http://szimek.github.io/signature_pad/
基于 Canvas 实现的手写板效果.
-
futurepress/epub.js Enhanced eBooks in the browser.
浏览器中查看 epub 电子书文件.
-
⭐️ adriengibrat/ts-custom-error Extend native Error to create custom errors
Custom Error 父类
-
👀 gcanti/fp-ts Functional programming in TypeScript
https://gcanti.github.io/fp-ts/
当 FP 遇到 Type. 在 JS 中实现 FP, 不仅仅是如何把功能做对, 把语法弄漂亮, 还要考虑如何让类型推导更合理.
-
AssemblyScript/assemblyscript A TypeScript-like language for WebAssembly.
一种语法类似于 typescript 的 WebAssembly 编程语言.
-
👀 yanyiwu/nodejieba "结巴"中文分词的 Node.js 版本
-
👀 vercel/ncc Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.
把 node 项目编译成单文件. 像 go 一样, 注意是连 node_modules 都编译进去. 适用于微服务, 或不方便安装 npm 的环境.
-
👀 vercel/pkg Package your Node.js project into an executable
把 node 项目编译成可执行文件. 像 go 一样, 注意是连 node 都编译进去. 适用于不方便安装 node 的环境.
-
⭐️ dotansimha/graphql-code-generator A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.
https://graphql-code-generator.com/
基于 GraphQL 产生代码. 主要用于产生 typescript.
-
quicktype/quicktype Generate types and converters from JSON, Schema, and GraphQL
基于 JSON/GraphQL 产生数据模型. 用于快速建模.
-
⭐️ Automattic/mongoose MongoDB object modeling designed to work in an asynchronous environment.
MongoDB 官方 ORM.
-
⭐️ typeorm/typeorm ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.
基于 decorator 建模的 ORM. 支持 MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL.
-
👀 graphile/postgraphile Execute one command (or mount one Node.js middleware) and get an instant high-performance GraphQL API for your PostgreSQL database!
https://graphile.org/postgraphile
基于 PostgreSQL 的 GraphQL api server. 如果你是一名 DBA 或者对 PostgreSQL 十分熟悉, 当你想快速的搭建一个 GraphQL api server 时, 可以尝试这个. 它允许你使用数据库中的用户权限来完成注册和登录, 并且把一些逻辑代码写在 PostgreSQL functions 里.
-
agenda/agenda Lightweight job scheduling for Node.js
基于 MongoDB 的 轻量级计划任务.
-
⭐️ typestack/class-validator Decorator-based property validation for classes.
基于 decorator 的数据验证.
-
⭐️ typestack/class-transformer Decorator-based transformation, serialization, and deserialization between objects and classes.
https://docs.typestack.community/class-transformer/v/develop/01-getting-started
基于 decorator 的数据转换. plain -> class, class -> plain, class -> class.
-
⭐️ cheeriojs/cheerio Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
类似于 jQuery 的后端 html 解析维护工具. 用于从网页中抓取有用的信息.
-
⭐️ nestjs/nest A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀
渐进式企业级服务器框架. 随着需求增加可以不断安装新的模块, 基本上你能碰到的问题官网上都有对应的解决方案, 是同类产品中功能最强大的.
-
⭐️ vercel/serve Static file serving and directory listing
简单的静态文件服务器, 支持前端单页应用. 用于测试前端构建结果是否符合预期, 也可以直接用于生产服务器.
-
vercel/next.js The React Framework
React SSR 服务器. 对组件的 SSR 支持有一定要求, 适合 React 项目需要一些简单的后端 API.
-
typicode/json-server Get a full fake REST API with zero coding in less than 30 seconds (seriously)
使用 json 作为数据库的增删改查服务器. 新建
db.json
, 启动json-server
. 现在你拥有一个 REST API 了. -
davewasmer/devcert Local HTTPS development made easy
本地开发时对任意域名启用 https.
-
⭐️ open-cli-tools/concurrently Run commands concurrently. Like
npm run watch-js & npm run watch-less
but better.并行执行命令.
-
⭐️ sindresorhus/execa Process execution for humans
人性化的进程调用工具. 比
child_process.spawn()
简便, 支持 async. -
⭐️ chalk/chalk 🖍 Terminal string styling done right
命令行 ANSI 颜色样式. 蜡笔, 不言而喻.
-
⭐️ isaacs/node-glob glob functionality for node.js
Glob 字符串解析器. 我们经常写的
**/*.js
就是由这个库解析匹配的, 来自于 Npm 作者. -
⭐️ sindresorhus/del-cli Delete files and directories
删除文件和目录. 会检测并防止意外删除项目之外的文件, 一般用于构建和自动化等场景.
-
⭐️ sindresorhus/get-port Get an available TCP port
获取可用端口号. 如果你的程序不需要固定的端口号, 可以用这个库. 例如 vite 默认使用 3000 端口, 不可用时会尝试 3001 3002.
-
⭐️ tiaanduplessis/kill-port ❌ Kill the process running on given port
杀掉占用端口的进程. 纯 js 跨平台, 用于必须运行在指定端口的场景, 多半是你自己的上一个进程没有正确退出.
-
⭐️ davidtheclark/cosmiconfig Find and load configuration from a package.json property, rc file, or CommonJS module
配置搜索加载工具. 有没有好奇为什么知名工具的配置可以支持那么多种格式
package.json
.json
.yaml
*rc
.config.js
? cosmiconfig 就是专门解决这个问题的. -
⭐️ evanshortiss/env-var Verification, sanitization, and type coercion for environment variables in Node.js
获取 ENV 并转化为确定的类型, 支持验证, 默认值, 和 typescript.
-
facebook/jscodeshift A JavaScript codemod toolkit.
代码修改工具. Facebook 为了让 react 升级更平滑而推出的迁移工具, Antd MobX 都曾在大版本升级时基于 jscodeshift 实现迁移.
-
⭐️ nock/nock HTTP server mocking and expectations library for Node.js
HTTP server mocking. 老牌 network mock 库, 持续更新.
-
vercel/test-listen Quick ephemeral URLs for your tests
启动 http server 并获取 url 用于后续测试.
-
😝 auchenberg/volkswagen 🙈 Volkswagen detects when your tests are being run in a CI server, and makes them pass.
检测当前环境, 如果是 CI 则所有测试全部通过.
-
⭐️ cognitom/paper-css Paper CSS for happy printing
一比一还原页面打印时的效果. 例如 A4 纸的打印效果, 可用于实现包含纸张概念的页面样式.
-
marvelapp/devices.css Pure CSS phones and tablets
绘制各种手机/平板.
-
⭐️ serverless/serverless ⚡ Serverless Framework – Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more! –
支持众多云服务的 serverless 框架. AWS Lambda, Azure Functions, Tencent SCF, Google Cloud Functions, Knative Serving, Alibaba FC, Cloudflare Workers, Fn, Kubeless, Apache OpenWhisk, Spotinst Functions.
-
⭐️ nvm-sh/nvm Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
Node 版本管理工具. 允许多个版本共存, 可以用
.nvmrc
文件指定当前目录用哪个版本的 node. -
⭐️ ohmyzsh/ohmyzsh 🙃 A delightful community-driven (with 1900+ contributors) framework for managing your zsh configuration. Includes 300+ optional plugins (rails, git, OSX, hub, docker, homebrew, node, php, python, etc), 140+ themes to spice up your morning, and an auto-update tool so that makes it easy to keep up with the latest updates from the community.
ZSH 配置管理.
-
⭐️ sindresorhus/pure Pretty, minimal and fast ZSH prompt
ZSH 轻量快速提示符. 支持显示 git status 和 command 执行时间.
-
⭐️ sindresorhus/np A better
npm publish
一个更好的
npm publish
命令. 用于 release 项目, 自动构建, 判断分支, 提交到 git, 提交到 npm, 发布 github release.
-
⭐️ getify/You-Dont-Know-JS A book series on JavaScript. @YDKJS on twitter.
你不懂 JS. 这本书不是标题党, 作者不会跟你讲 0.1 + 0.2 != 0.3 这种问题, 而是讲实实在在的有用的细节.
-
👀 airbnb/react-sketchapp render React components to Sketch ⚛️💎
http://airbnb.io/react-sketchapp/
使用 react 组件写 sketch. 为什么? Sketch 文件不好管理, 新旧版本不兼容. 改成 react 组件写法, 需要时输出到 sketch 文件.
-
lllyasviel/style2paints sketch + style = paints 🎨 (TOG2018/SIGGRAPH2018ASIA)
AI 填色.
-
⭐️ github/gitignore A collection of useful .gitignore templates
常见
.gitignore
模板. 在 github 上新建 repo 时选择的模板来源于这里. -
⭐️ sparanoid/chinese-copywriting-guidelines Chinese copywriting guidelines for better written communication/中文文案排版指北
曾经的辉煌
- browserify/browserify browser-side require() the node.js way. 前端打包工具的鼻祖.
- gulpjs/gulp A toolkit to automate & enhance your workflow. 流式自动化编排.
- google/traceur-compiler Traceur is a JavaScript.next-to-JavaScript-of-today compiler. 因巨大的 runtime 和丑陋的生成结果而输给了 babel.
- ractivejs/ractive Next-generation DOM manipulation. 已经变成上一代.
- assaf/zombie Insanely fast, full-stack, headless browser testing using node.js. 早期 e2e 框架, 不需要安装浏览器.