前端开发

⬅︎ 返回上层

TOC

• 其他
• 框架
• 表单
• 物理引擎
• HTML
• A11Y
• Code Lint
• Browser Feature Detection
• 文件上传
• ECMAScript
• 有限状态机 && Statechart
• 状态管理
• 声音
• Cheatsheet
• 存储
• Fast-Development
• AJAX
• Mock
• 模块加载器
• 编译工具
• Webpack
  • analyzer
• UI 组件
  • Loading Spinner
  • React 组件
• React
  • DevTools
  • UI Component Explorer
  • IDE
  • 教程
• React-Native
• 排版 Typography
  • 中文排版
• CSS
  • 教程
  • CSS in JS
  • CSS in JSX
  • CSS Module
  • PostCSS
  • CSS Schema
  • 栅格/网格/Grid
• 参数可视化
• 动效
  • 2D
  • 3D
  • 粒子效果
  • 滚动条
• UI/绘图
  • 2D
  • 3D
  • 数据可视化
  • 图表
  • 组件库
• 测试
• 响应式
• Headless Browser
• Profiling
• 日志
• 兼容性检查
• Polyfill
• CDN
• 用户导引 Walkthrough
• 待评价
• UI component explorers
• 其他人的工具列表

其他

• browserify as a service: 将 npm 包转成前端可用的在线服务
  • Github Repo
• webpack as a service: pkgzip: 将 npm 包转成前端可用的在线服务
• microjs: 小容量类库列表
• bundlesize: 打包大小检测
• bundlephobia: 检测包大小，前端下载包的耗时
• push.js: 浏览器推送的统一封装
• stats.js: JavaScript 性能监控，在前端显示 FPS 等指标
• size-limit: 检测 JS 文件的大小
• http://gs.statcounter.com/ 前端全球数据统计
• uglify-js: js 混淆工具
• jsnice: 反混淆工具（只是让代码容易看一点）。
  • 反混淆关键词：de-obfuscate
  • javascript-obfuscator: 不是很好用
• js-beautify: html-beautify css-beautify js-beautify
• intro.js: 分步用户引导/导航/介绍的库
• highlight.js: 语法高亮前端库
  • prism: 备选方案
• https://custom-elements-everywhere.com/ : Custom Element 在各个框架的适用度测试
• medium-zoom: 图片点击放大
• MathJax: JavaScript display engine for LaTeX, MathML, and AsciiMath notation
• xterm.js: 浏览器里模拟终端
• LiveTerm: 快速构建终端风格的网站
• dflex: 框架兼容性很好的 DOM 拖拽库

框架

• single-spa: Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you’re using)

表单

• final-form

物理引擎

• matter.js

HTML

• HEAD: HEAD 里放什么？
• lit: a simple library for building fast, lightweight web components

A11Y

• axe-core
  • react-axe

Code Lint

• stylelint: css lint
• eslint-plugin-jsx-a11y

Browser Feature Detection

• MDN - Implementing feature detection
• feature.js: 检测 async, addEventListener, canvas, classList, cors, contextMenu, css3Dtransform, cssTransform, cssTransition, defer, deviceMotion, deviceOrientation, geolocation, historyAPI, placeholder, localStorage, matchMedia, pictureElement, querySelectorAll, remUnit, serviceWorker, sizes, srcset, svg, touch, viewportUnit, webGL
• Modernizr: 检测 HTML5 和 CSS3 特性
• feature-detect-es6: 检测 ES2015 以上的特性

文件上传

• filepond
• FileAPI

ECMAScript

• ECMAScript 提案
• ECMAScript 标准文档 ECMA262

有限状态机 && Statechart

• https://statecharts.github.io/ 关于状态机和状态图的一切
• https://medium.freecodecamp.org/how-to-model-the-behavior-of-redux-apps-using-statecharts-5e342aad8f66

• 状态图 UML 图释

• xstate: 有限状态机
  • use-machine

状态管理

• effector: 基于 hook 的状态管理。很干净，没有多余的概念。跨框架。
• zustand: 待评价
• jotai: 待评价

声音

• Tone.js: A Web Audio framework for making interactive music in the browser.

Cheatsheet

• https://easings.net/zh-cn 缓动函数速查表
  • 源码

存储

• localForage: 异步存储的统一封装
• sql.js: JS 版本的 SQLite，前后端通用
  • node-sqlite3: 只支持 NodeJS 的 SQLite

Fast-Development

• poi

AJAX

• intercooler-js: 用 DOM 标签属性发起 Ajax 请求

Mock

• jquery-mockjax: 拦截 Ajax 请求返回 mock 数据

模块加载器

• SystemJS

编译工具

• webpack: 编译框架或应用的工具。配置项多，方便高端玩家定制
• esbuild: Go 开发的，超级快
  • esbuild-loader: 在 webpack 里调用 esbuild
• SWC: Rust 开发的，超级快 -turbo: Rust 开发的。「待评价」
• parcel: 编译框架或应用的工具。零配置
• rollup: 编译类库时首选工具。零配置
• fuse-box: 「待评估」
• pikapkg/web: 「待评估」直接在浏览器端下载安装 npm 包
• pikapkg/pack: 「待评估」编译打包工具

Webpack

• webpack-blocks: Configure webpack using functional feature blocks.
• jarvis: 浏览器版 Webpack dashboard
• webpack-dashboard: CLI 版 Webpack dashboard
• progress-bar-webpack-plugin: 显示编译进度
• webpack-manifest-plugin: webpack plugin for generating asset manifests

analyzer

• source-map-explorer
• webpack-bundle-analyzer
• webpack-bundle-size-analyzer

UI 组件

• noty: 通知提示

Loading Spinner

• react-spinners-kit
• react-loading

React 组件

• https://reactjsexample.com/
• react-i18next: 支持切换语言时自动切换翻译。
• react-json-view: JSON Viewer
• react-error-boundary: Simple reusable React error boundary component
• rebass: React primitive UI components built with styled-system
  • rebassjs/space: 源码用了 React.cloneElement，不太好
  • rebassjs/grid
• kbar: 类似 Alfred 的 Launcher 组件。
• flash-list: 列表组件

React

• create-react-app: 集前端工程精华之作，React 工程开发环境
  • 虽然 webpack 和 babel 配置不能修改，但是社区提供了解决方案
    • react-app-rewired，文章 已经不兼容 CRA v2 版本了，替代方案如下：
      • rescripts
      • craco
    • customize-cra
  • razzle: 既有 CRA 的特性，又支持自定义修改配置。还支持 SSR。不限制目录结构，不限制技术栈。
• preact: React alternative
• htm: JSX Alternative! 使用 JS 字符串模板语法 + HTML DOM 语法。
• react-docgen: react 组件文档生成器
• awesome-react-components
• why-did-you-update
• react-media: 媒体查询工具
• react-loadable: 动态加载组件的工具
  • react-loadable-ssr-addon: 用于 SSR 场景下动态加载组件。
• react-helmet: 用于 SPA 中动态改变 HTML 信息
• reactopt: React 性能优化
• react-360: a framework for the creation of 3D and VR user interfaces. Built on top of React.
• react-fast-compare
• svgr: SVG 转成 React 组件。
• SWR: 请求数据的 react hook
• loadable-components: 用来分离组件代码，懒加载。它跟 React.lazy 相似，具体区别见这里

DevTools

• react-devtools
• redux-devtools

UI Component Explorer

• storybook: 组件预览 for React & React Native
• react-styleguidist: 类似 storybook，提供实时预览的工具
• Component Story Format (CSF): 组件展示的一种社区标准格式

IDE

• (待考察)reactide: React IDE

教程

• react-book
• react-bits: react 技巧合集

React-Native

• reactotron: 状态检视

排版 Typography

• typography.js: A powerful toolkit for building websites with beautiful design
• textblock: for adjusting size, leading, and grades to cast continuously responsive typography
• FlowType.JS: 根据容器宽度自动调整字号

中文排版

• typo.css
• charch

CSS

• clean-css
• normalize.css
  • styled-normalize: normalize.css 的 React 组件
  • modern-normalize: 替代方案
• https://csstriggers.com/
• https://github.com/jolaleye/cssfx : Beautifully simple click-to-copy CSS effects

教程

• http://cssreference.io/ : CSS 可视化手册
  • 源码: https://github.com/jgthms/css-reference

CSS in JS

• styled-components: 字符串模板
• emotion: 比 styled-component 更灵活。可以单独设置样式 (css api)，不基于 DOM 类。可以用字符串模板，也可以用函数传参，结合 styled-components 和 glamorous 的优点。
• styled-system: Style props for rapid UI development
• polished: CSS helper functions for CSS in JS

CSS in JSX

• styled-jsx

CSS Module

• react-css-modules: 非常酷的工具

PostCSS

• cssnano: A modular minifier, built on top of the PostCSS ecosystem
• postcss-cssnext
• rucksack-css

CSS Schema

• http://schemastore.org/css/

栅格/网格/Grid

• grid 与 flexbox 介绍使用场景
  • Grid and flexbox
  • CSS 终极之战：Grid VS Flexbox
• gridy: 支持 data attribute 和 class name。可扩展性很强，可设置列数、breakpoint、命名风格等。

参数可视化

• dat.gui: 轻量级动态修改 JS 变量的 GUI 接口

动效

• typeit: 打字动效
  • typed.js
  • typing.js

2D

• mojs
• popmotion: 类似 mojs，文件较小
• anime.js
• animate.css
• velocity

3D

粒子效果

• particles.js: 不推荐，卡得很

滚动条

• aos: 滚动触发动效

UI/绘图

2D

• d3
• p5.js: Processing JS 库
• paper.js: 向量库框架，Based on Canvas
• pixi.js: HTML5 Creation Engine

3D

• three.js
  • react-three-fiber: A React renderer for Three.js
• whs.js: 3D framework Based on Three.js

数据可视化

• plotly.js
• vis
• SandDance

图表

• highcharts
• c3
• g2
• chart.xkcd: xkcd 风格的图表库

组件库

• visx: D3 + React 技术栈。容易组合底层组件
• nivo: D3 + React 技术栈。拿来即用的组件

测试

• jest: 测试框架，前后端通用，支持 ts、babel 等扩展。
• cypress: 非常酷炫的，大而全的，前端自动化测试框架。
• enzyme: JavaScript Testing utilities for React
• playwright: 浏览器 UI 自动化测试工具。支持多种内核 (Chromium, Webkit, Firefox) 的浏览器自动化操作。微软出品。

响应式

• sizzy: 测试网站响应式的工具
• https://material.io/tools/resizer/ : 测试网站响应式的服务

Headless Browser

• puppeteer: Headless Chrome
  • puppeteer-recorder
  • url-to-pdf-api: Converts any URL or HTML content to a PDF file or an image (PNG/JPEG)
• phantomjs: Scriptable Headless WebKit

Profiling

• source-map-explorer: 根据 sourcemap 分析代码占用空间
• plato: 代码复杂度分析工具

日志

• debug: 调试日志
• log-with-style: 输出带样式的日志
• consola: 同时支持前端和 Node 端的日志库

兼容性检查

• http://outdatedbrowser.com/zh-cn 浏览器升级提示
  • source: https://github.com/burocratik/outdated-browser
• browserslist: Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env.
  • https://browserl.ist : Display compatible browsers from a browserslist string.
• browser-compat-data: This repository contains compatibility data for Web technologies as displayed on MDN
• compat-table: ECMAScript 5/6/7 compatibility tables
• core-js: 非常细分的 JS Polyfill

Polyfill

• console-polyfill
• promise-polyfill
• github/fetch
• json3
• es6-shim: ECMAScript 6 compatibility shims for legacy JavaScript engines

CDN

• https://cdn.baomitu.com/ : 国内的 CDN
• https://cdnjs.com/ : 国外的 CDN，国内也能访问
• unpkg: The CDN for everything on npm
• https://esm.sh/ : A fast, global content delivery network for NPM packages with ES Module format.
• https://jspm.org/ : JSPM provides a module CDN and package management for import maps
• https://www.skypack.dev/ : Load optimized npm packages with no install and no build tools.

用户导引 Walkthrough

• driver.js: A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page
• reactour: Tourist Guide into your React Components

---

待评价

UI component explorers

• Carte Blanche: an isolated development space with integrated fuzz testing for your components
• Electrode Explorer: for React components
• Chromatic: for Meteor + React
• Vue Play: for Vue

参考自 https://archive.ph/LDHnV

---

其他人的工具列表

• https://github.com/nieweidong/fetool