前言
回顾 4、5 年前开始，我在 Github 上整理过一个 Repo 叫《web-frontend-awesome》当时的想法是把自己在日常工作中会常用到的前端相关的东西记录下来，方便查阅与使用。4、5 年前，那应该还算是一个 jQuery 一招鲜的年代，使用 require.js / sea.js + jQuery / zepto.js、开源的 jQuery 插件、自己扩展一些 jQuery 插件，基本可以解决一切的问题；但随着前端 MVC 的框架 backbone.js 已经被广泛应用，虽然 backbone.js 还是基于 jQuery 来实现。前端 MV+ 框架的思想已经开始逐渐深入人心，紧接着就是 AngularJS、React、Vue.js 的兴起，再到前端实现多端 / hybrid APP 广泛应用（React Native，Weex，phoneGap，Ionic，Electron / nw.js，Flutter）；往后再有 微前端 / 低代码前端 / 前端机器学习 TensorFlow.js 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主，现下面重新整理一下，逐渐增加一些新的东西吧。
前端开发工具大全 – Web Front End Awesome
前端代码编辑器与调试工具 / IDE & Debug / 在线 IDE
VS code(Visual Studio Code) | Webstorm | HBuilder(国产) | Sublime Text | Atom
Chrome 开发者工具 | Debugger | vConsole (移动端 App 内嵌 Web 调试) | eruda (移动端 App 内嵌 Web 调试) | Postman (接口调试与管理) | Postwoman (接口调试与管理) | Fiddler (网页 / 接口抓包调试) | DoraemonKit/miniapp | whistle | SwitchyOmega | mdebug(类 vConsole)
stackblitz | codesandbox | github.dev | codepen.io
前端编码规范（Code Standards & Style）
Javascript ES 6 | Javascript ES 5 | Learn ES2015 | JSDoc 中文文档 | TypeScript Handbook | DefinitelyTyped | awesome-typescript | typescript-definition-style-guide | Eslint | CSS | React | FP (Functional Programming in javascript) | html5-boilerplate
CamelCase | PascalCase | Hungarian notation
OOCSS | BEM
CommonJS / CMD | Asynchronous module definition / AMD
FLIP Your Animations
WAI-ARIA roles
Git Commit 标准化
Javascript 库（Javascript Libraries）
jQuery | Zepto | Immutable-js | Lodash | Ramda | Underscore | Mootools | rxjs – A reactive programming library for JavaScript | You-Dont-Need-jQuery
前端 MV+ 框架、单页面程序及相关（MV+ & SPA）
React | Vue.js | Angular.js | Elm | Hybrids | svelte | Backbone.js
Awesome-vue | Awesome-react | Redux | zustand 【Why zustand over redux?】 | jotai 【Jotai scales from a simple useState replacement to an enterprise TypeScript application】 | Flux | Angular-Styleguide | Backbone.marionette | Backbone-fundamentals
Redux 中文文档 | todomvc [MV* framework 入门必备]
Web Component
Web Components | lit-element | lit-html | omi | riot
静态网站生成 / 服务器端渲染 / 文档生成工具（static site generator / SSR / documentation site generator）
next.js | nuxt.js | gatsby | vuepress | hexo | Docusaurus
docsify | gitbook | smart-doc [国产] | redoc | knife4j [国产] | yapi [国产] | bisheng [国产] | 觅道文档 [国产 支持本地部署] | 语雀 [国产 在线文档
Node.js 后端框架（Node.js Backend Frameworks）
Express | Fastify | NestJS | Koa | eggjs
微前端（Microfrontends）
qiankun（乾坤） | microfrontends | single-spa | mooa | ice-lab / icestark | Paciolan / remote-component | Webpack / Module Federation
大前端多端实现 小程序 / Native & Hybrid Native / 桌面端（Native）
mina | wepy | uni-app | taro | mpvue
react-native | weex | PhoneGap | ionic | meteor | WebViewJavascriptBridge | framework7
electron | nw.js
Flutter | quasar （多端不含小程序）
Sketch 面板插件开发 | Photoshop 面板插件 开发 | Chrome 插件（Extensions）开发
前端构建工具 / 包管理工具 / 打包工具（Bundle & Build）
Npm – a package manager for javascript | NVM – Node Version Manager | Yarn – a dependency management | lerna – A tool for managing JavaScript projects with multiple packages. | Pnpm – Fast, disk space efficient package manager. | Webpack – a bundler for modules | Rollup – Next-generation ES module bundler | Grunt | Gulp | Bower – package manager | Browserify | FIS
snowpack | vite (used by Vue 3) | esbuild (used by vite & snowpack)
Nx 【HOT】 | tsup 【HOT】
Javascript 模块加载器（Module Loaders）
样式预处理工具（Style Preproccessing）、CSS-in-JS 技术
Less | Sass / Scss | Stylus
Styled-components | css-modules（react 脚手架已集成）
UI 库 / UI 管理后台模版（UI / Admin Template） / 全栈解决方案（Full Stack Solutions） / GUI
Bootstrap | Tailwind CSS | Framework7 | SUI Mobile | WeUI | jQuery WeUI | Bootstrap Material Design | Material Design Lite | carbon | Materialize | SUI | Amaze UI | AdminLTE | Foundation-sites | Ant Design（React / Vue） | Element UI（Vue） | iview（Vue） | vuetify | Semantic-UI | Primer | Jquery-ui | Jquery-ui-bootstrap | Bulma | Milligram | Mint UI（Vue Mobile） | Vant UI（Vue Mobile） | Cube UI（Vue Mobile） | Vue Strap | Kendo UI[收费专业级] | DataV[类似阿里DataV，大屏数据展示] | microsoft / fluentui | daisyUI – Tailwind CSS Components
EasyUI | Extjs
vue-element-admin | iview-admin | ant-design-pro | vue-manage-system | antd-admin | yezihaohao/react-admin | marmelab/react-admin | marmelab/ngx-admin | coreui-free-bootstrap-admin-template
jeecg-boot【java 一键生成前后端代码】 | renren-fast【java 一键生成前后端代码】 | eladmin【java 一键生成前后端代码】 | RuoYi【java 一键生成前后端代码】 | mall-admin-web【java】 | Springboot_v2【java】 | yii2_fecshop【php】 | CRMEB【php】 | laravel-vue-spa【php】 | laravue【php】 | SpringBoot-Shiro-Vue【Java】 | Davinci【Java】 | gin-vue-admin【Go】
Vue vben admin（vue3,vite2,TypeScript 开箱即用的中后台前端解决方案）
【GUI】
mo.js
低代码前端（Low code for FE）
amis | react-jsonschema-form | form-render | form-create | vue-form-generator | vue-form-making | form-generator | alibaba / formily | react-visual-editor | 鲁班H5 | x-render | lowcode-engine | alibaba / designable | google / Blockly
轮播插件（Carousels）
Swiper | Slidesjs | Swipe | jQuery Cycle Plugin | Nivo-Slider | OwlCarousel
Reveal.js | FullPage.js | Impress.js
瀑布流布局（Waterfall）
图片懒加载（Lazy load）
拖拽 / 监听触屏 / 划动事件 / 滚动（Drag & Resize / Swipe touch / Scroll）
react-dnd | react-draggable | vue-draggable-resizable | moveable | Vue.Draggable | TouchSwipe | Hammer.js | iscroll | mobileSelect | react-virtualized
媒体播放（Media Player Html5 / flash）
videojs/video.js | Selz/plyr | Bilibili/flv.js | mediaelement | DPlayer
CSS 3 动画库（CSS 3 Animation）
animate.css | css-loaders | hamburgers | Hover.css | animateplus | hint.css
图形 / 图表 / 图库 / 流程图（Charts / Flow Charts）
Echarts | plotly.js | Highcharts | Chart.js | d3 | visx | morris.js | c3 | fabric.js | rough | paper.js | zrender（A lightweight canvas library which providing 2d draw for ECharts） | konva | cube.js（Cube.js – Open Source Analytics Framework 开源全栈 BI 框架） | p5.js | jsplumb
mermaid | bpmn-js | GoJS | mxGraph / drow.io | react-diagrams | svgedit
JsBarcode | node-qrcode | vue-kityminder-editor | flowchart-editor | 百度脑图 | LeaderLine | lazy-line-painter | maker.js | miniPaint [在线 PS] | photopea [在线 PS] | relation-graph | G6 | GGEditor | X6 | XFlow | butterfly | dagre-d3 画关系（流程）图插件 | excalidraw | d2-playground | SVG Tutorial
3D / Html5 游戏制作 / 3D 引擎 / AR / VR（3D / Game & 3D Engines）
phaser | Egret | Cocos2d | layabox（小游戏） | Createjs | Pixi.js | Playcanvas
Three.js | AR.js | ogl | Aframe VR | greensock / GSAP | Babylon.js | Hilo3d (Alibaba Group) | ThingJS (国内闭源) | Hightopo / HT for Web (国内闭源) | 3DTilesRendererJS | three-gltf-viewer | glTF-Sample-Viewer | KhronosGroup / glTF
webgl-fundamentals | gl-matrix | twgl.js | GLSL ES 1.0 spec | webgl 官网（OpenGL ES for the Web） | WebGL State Diagram | WebGLSamples | glslify – A node.js-style module system for GLSL | The Book of Shaders | GLTransitions
Pannellum（全景） | Krpano（全景，收费）
地图（MAP）/ GIS
百度地图 | 高德地图 | Leaflet | Openlayers | deck.gl | cesium | mapbox-gl-js | webgl-wind | itowns（three.js based）
时间库 / 插件（Date & Time）
dayjs | moment | date-fns | bootstrap-datepicker | fullcalendar | Pikaday | My97DatePicker
富文本编辑器（Editor）/ 代码高亮、代码编辑器（Highlighted）
wysiwyg-editor | quill | CKEditor | alloy-editor | ueditor | umeditor | mavonEditor
Prism | CodeMirror | highlight.js | monaco-editor | theia | tiptap | tui.editor | lexical
进度条 / 可调进度条（Progress Bar）
nprogress | bootstrap-slider | progressbar.js | pace
上传文件（File Uploader）
dropzone | jQuery-File-Upload | fine-uploader | plupload | uppy | webuploader
前端模版引擎（Template compiler）
ArtTemplate | BaiduTemplate | mustache.js | Underscore Templates | Pug (jade) | doT
加密解密（Encode / Decode）
js-base64 | JavaScript-MD5 | jwt-decode | crypto-js
测试 / 单元测试（Test / Unit Test）
jest | mocha | enzyme | jasmine | nightwatch
前端算法（Algorithm）
Yjs-CRDT-Algorithm | wavefunctioncollapse | javascript-algorithms | QuadTree | sparse-octree | dagre | A Primer on Bézier Curves | tween.js | flatten-js | 各种求交算法 intersect、AABB、OBB、Ray、AStar、BVH、Dijkstra 等等 | 经典的 Reingold–Tilford tidy 布局算法、生态树 Dendrogram 布局算法、缩进树 IndentedTree 布局算法、脑图树 Mindmap 布局算法等等 | 常见的图像插值算法包括最近邻插值（Nearest-neighbor）、双线性插值（Bilinear）、双立方插值（bicubic）、lanczos插值、方向插值（Edge-directed interpolation）、example-based插值、深度学习等算法
其他（others）
clipboard.js | fastclick | html2canvas | dom-to-image | Print.js | pico | sheetjs（excel） | jexcel | x-spreadsheet | tesseract.js（OCR） | brain.js（Neural networks in JavaScript） | jsPDF | pdf-lib | awesome-javascript | qs（Query String） | draggable | js-cookie | Mock | Font-Awesome | lib-flexible | json2csv
faker.js | Mock | tracking.js
-
- 本文作者：Nelson Kuang，欢迎大家留言及多多指教
- 版权声明：欢迎转载学习 => 请标注信息来源于http://www.a4z.cn/fe/2019/11/22/web-front-end-awesome/
