收录了一些前端工程师需要了解的语言、框架、工具,进行了简单的解释,并收录了官网、Github地址及一些中文学习网站。
语言
HTML
超文本标记语言(HyperText Markup Language)是一种简单的、由不同元素组成的标记语言,它定义了网页内容的含义和结构。最新的标准为 HTML5 。
官网: https://html.spec.whatwg.org/multipage/
Github: https://github.com/whatwg/html
CSS
层叠样式表(Cascading Style Sheets)是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。最新的标准为 CSS3 。
官网: https://www.w3.org/Style/CSS/#specs
Github: https://github.com/topics/css
Javascript
JavaScript(又称 ECMAScript)是一种函数优先的、轻量级的、解释型或即时编译型编程语言。当前最被广泛使用的版本为 ES6(也即 ES2015),从2015年(ES2015)开始,每年更新一个版本添加上新的特性。
官网:
http://www.ecma-international.org/publications/standards/Ecma-262.htm
中文学习网站:
https://developer.mozilla.org/zh-CN/docs/JavaScript
https://wangdoc.com/javascript/index.html
http://www.w3school.com.cn/js/
http://www.runoob.com/js/js-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
TypeScript
TypeScript 是由 Microsoft 开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
官网: http://www.typescriptlang.org
Github: https://github.com/Microsoft/TypeScript
中文学习网站:
https://www.tslang.cn/
https://typescript.bootcss.com/
CoffeeScript
CoffeeScript 是一门将类 Ruby 语言编译到 JavaScript 的小巧编程语言。
官网: http://coffeescript.org
Github: https://github.com/jashkenas/coffeescript
中文学习网站: http://coffee-script.org/
PureScript
PureScript 是一款编译为 JavaScript 的强类型编程语言,使用 Haskell 开发。
官网: https://www.purescript.org
Github: https://github.com/purescript/purescript
Elm
Elm 是一款用来开发 web 应用的函数式编程语言,使用 Haskell 开发。
官网: https://elm-lang.org
Github: https://github.com/elm
ReScript
ReScript 是一款强类型的 编程语言,可以编译成高效且可读的JavaScript 代码,使用 OCaml 开发。
官网: https://rescript-lang.org
Github: https://github.com/rescript-lang
Dart
Dart 是一款快速的、针对客户端优化了的跨平台编程语言。由 Google 开发。
官网: https://dart.dev
Github: https://github.com/dart-lang
中文学习网站:
https://www.dartcn.com/
https://dart.cn/
Rust
一款高效高可用的编程语言。
官网: https://www.rust-lang.org
Github: https://github.com/rust-lang/rust
框架
React
React 是一个声明性的、高效的、灵活的 JavaScript 框架,用于构建用户界面。由 Facebook 开发。
官网: https://reactjs.org
Github: https://github.com/facebook/react
中文学习网站:
https://www.reactjscn.com/
http://www.runoob.com/react/react-tutorial.html
Redux
一款轻量级的状态管理库,只有2kB。
Github: https://github.com/reduxjs/redux
MobX
一款简单的、可伸缩的状态管理库。
官网: https://mobx.js.org
Github: https://github.com/mobxjs/mobx
zustand
一款小巧快速可扩展的状态管理库。
官网: https://zustand-demo.pmnd.rs
Github: https://github.com/pmndrs/zustand
react-router
一款基于 React 的路由管理库。
Github: https://github.com/remix-run/react-router
redux-saga
一款直观的 Redux 副作用管理器。
官网: https://redux-saga.js.org
Github: https://github.com/redux-saga/redux-saga
create-react-app
React 脚手架工具
官网: https://create-react-app.dev
Github: https://github.com/facebook/create-react-app
SWR
React Hooks 库,专注于数据获取。
官网: https://swr.vercel.app/
Github: https://github.com/vercel/swr
Vue
Vue.js 是一个渐进式的的 JavaScript 框架,用来构建用户界面。由 Evan You(尤雨溪)开发。
常用的 Vue UI 库有 Element UI、Vuetify、iview、Vue Bootstrap、Vue Material、Buefy、Quasar等。
常用的Vue 移动 UI库有 vux、mint-ui、vant等。
cli vue-cli
状态管理库 vuex
前端路由库 vue-router
小程序开发框架 mpvue、uni-app
官网: https://cn.vuejs.org/v2/guide/
Github: https://github.com/vuejs/vue
中文学习网站: https://cn.vuejs.org/index.html
vue-router
Vue 的单页面应用路由。
Github: https://github.com/vuejs/vue-router
vuex
Vue 的大规模状态管理库。
Github: https://github.com/vuejs/vuex
vue-cli
Vue 的项目脚手架工具。
Github: https://github.com/vuejs/vue-cli
vue-loader
Vue 的单页面组件文件 webpack loader。
Github: https://github.com/vuejs/vue-loader
Angular
增强 Web 应用程序的HTML框架。由 Google 开发。
官网: https://angularjs.org
Github: https://github.com/angular/angular.js
中文学习网站: https://www.runoob.com/angularjs/angularjs-tutorial.html
Svelte
一款编译型 JavaScript 框架。
官网: https://svelte.dev
Github: https://github.com/sveltejs/svelte
kit
Svelte 应用编译工具
官网: https://kit.svelte.dev
Github: https://github.com/sveltejs/kit
Cycle.js
一款函数式的和响应式的 JavaScript 框架。
官网: https://cycle.js.org
Github: https://github.com/cyclejs/cyclejs
Alpine.js
Alpine.js 是一款通过扩展HTML属性实现响应式和声明式的 JavaScript 框架。
官网: https://alpinejs.dev
Github: https://github.com/alpinejs/alpine
Polymer
Polymer 是一款 web 框架,用来构建可重用的 Web 组件(Web Components)。由 Google 发布,目前已处于维护模式,不再开发新的功能。
官网: https://polymer-library.polymer-project.org
Github: https://github.com/Polymer/polymer
Lit
Lit 是一个轻量级的库,用于构建快速、轻量级的 web 组件。由 Google 发布,属于 Polymer 的替代品。
官网: https://lit.dev
Github: https://github.com/lit/lit
Stencil
Stencil 是一个简单的编译器,用于生成 Web 组件和 生成静态站点的渐进式 Web 应用。
官网: https://stenciljs.com
Github: https://github.com/ionic-team/stencil
Inferno
Inferno 是一款类 React、性能优秀的 JavaScript 框架。
官网: https://infernojs.org
Github: https://github.com/infernojs/inferno
Preact
Preact 是一个只有 3kB 大小的 React 替代框架,拥有与 React 相似的 API、组件和虚拟 DOM。
官网: https://preactjs.com
Github: https://github.com/developit/preact
中文学习网站:
https://preactjs.com
https://preact.bootcss.com
Dojo
Dojo 是一款基于 Typescript 开发的前端框架。
官网: https://dojo.io
Github: https://github.com/dojo/framework
Ember.js
一款 JavaScript框架。
官网: https://emberjs.com
Github: https://github.com/emberjs/ember.js
Mithril
Mithril 是一个小巧的现代化的 JavaScript 框架,用于构建单页面应用.
官网: https://mithril.js.org
Github: https://github.com/MithrilJS/mithril.js
中文学习网站: https://www.mithriljs.net
Aurelia
Aurelia是一款用来构建浏览器移动桌面应用的现代前端 Javascript 框架。
官网: https://www.auerlia.io
Github: https://github.com/aurelia/framework
Choo
一款函数式编程框架,只有4kb。
官网: https://choo.io
Github: https://github.com/choojs/choo
San
一款高性能、小体积、高兼容性的 mvvm 框架
官网: https://baidu.github.io/san/
Github: https://github.com/baidu/san
Next.js
基于 React 的服务端渲染 web 应用框架。
官网: https://nextjs.org
Github: https://github.com/zeit/next.js
Nuxt.js
基于 Vue 的服务端渲染 web 应用框架。
官网: https://nuxtjs.org
Github: https://github.com/nuxt/nuxt.js
Remix
全栈 web 应用框架
官网: https://remix.run
Github: https://github.com/remix-run/remix
Astro
采用 Island 架构,适合轻交互重内容的 web 应用框架
官网: https://astro.build
Github: https://github.com/withastro/astro
dva
dva 是一款基于 redux、redux-saga 和 react-router 的轻量级前端框架(受到 Elm 和 Choo 启发)。由 Alibaba 开发。
官网: https://dvajs.com
Github: https://github.com/dvajs/dva
编译构建工具
Webpack
Webpack 是一款前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则转换并打包成符合生产环境部署的前端资源。
官网: https://webpack.js.org
Github: https://github.com/webpack/webpack
中文学习网站: https://www.webpackjs.com/concepts
学习文档:webpack小抄
Rollup
Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如库或应用程序。支持按需打包。
官网: https://rollupjs.org
Github: https://github.com/rollup/rollup
中文学习网站:
http://www.rollupjs.com/
Vite
前端编译构建工具,基于 Rollup。
Github: https://github.com/vitejs/vite
Gulp
JavaScript自动化工作流构建工具,使用流式方法来进行打包。
官网: https://gulpjs.com
Github: https://github.com/gulpjs/gulp
中文学习网站: https://www.gulpjs.com.cn
Grunt
JavaScript任务自动化构建工具,通过配置来进行打包。
官网: https://gruntjs.com
Github: https://github.com/gruntjs/grunt
中文学习网站: http://www.gruntjs.net
Parcel
Parcel 是一个 web 应用打包工具, 与其它工具的区别在于开发者的使用体验。它利用多核处理器提供了极快的速度, 并且不需要任何配置。采用模块化的思想进行打包。
官网: https://parceljs.org
Github: https://github.com/parcel-bundler/parcel
中文学习网站:
https://www.parceljs.cn/getting_started.html
http://www.css88.com/doc/parcel/
http://www.parceljs.io
esbuild
一款高性能的 Javascript 打包工具,采用 go 编写。
官网: https://esbuild.github.io
Github: https://github.com/evanw/esbuild
工具库
jQuery
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
官网: https://jquery.com
Github: https://github.com/jquery/jquery
中文学习文档: https://www.jquery123.com
Zepto
Zepto 是一个轻量级的、针对现代高级浏览器的JavaScript 工具库,它兼容 jQuery 的 API 。
官网: http://zeptojs.com
Github: https://github.com/madrobby/zepto
中文学习文档: https://zeptojs.bootcss.com
Lodash
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
官网: https://lodash.com
Github: https://github.com/lodash/lodash
https://www.lodashjs.com
Underscore
Underscore 是一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
官网: http://underscorejs.org
Github: https://github.com/jashkenas/underscore
http://www.css88.com/doc/underscore/
UI
Bootstrap
Bootstrap 是流行的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
官网: http://getbootstrap.com
Github: https://github.com/twbs/bootstrap
中文学习网站:
http://www.bootcss.com
https://v3.bootcss.com
Semantic UI
一款UI框架,支持 React, Angular, Meteor, and Ember 框架。
官网: http://www.semantic-ui.com
Github: https://github.com/Semantic-Org/Semantic-UI
Ant Design
一款企业级的 UI设计 与 React UI 组件库,风格偏向中后台产品,由蚂蚁金服提供。
官网: https://ant.design
Github: https://github.com/ant-design/ant-design
中文学习网站: https://ant.design/index-cn
Material-UI
符合 Material Design 的 React 组件库。
官网: https://material-ui.com
Github: https://github.com/mui-org/material-ui
Vuetify
符合 Material Design 的 Vue 组件库。
官网: https://vuetifyjs.com
Github: https://github.com/vuetifyjs/vuetify
中文官网: https://vuetifyjs.com/zh-Hans/
Element-UI
基于 Vue2.0 的 UI组件库。
官网: https://element.eleme.io
Github: https://github.com/ElemeFE/element
iView
基于 Vue 的 UI组件库。
官网: http://iview.talkingdata.com
Github: https://github.com/iview/iview
Layui
Layui 是一款采用自身模块规范编写的前端 UI 框架。
官网: https://www.layui.com
Github: https://github.com/sentsin/layui
Tailwind
一个用于快速 UI 开发的实用工具集 css 框架。
官网: https://tailwindcss.com
Github: https://github.com/tailwindcss/tailwindcss
中文学习文档: https://www.tailwindcss.cn
MaterializeCSS
一款基于 Material Design 的 css 框架。
Github: https://github.com/Dogfalo/materialize
Javascript 内核 & 运行时
ChakraCore
Micosoft 开发的 Javascript 引擎,被用于 Micosoft Edge 浏览器中。
Github: https://github.com/Microsoft/ChakraCore
JavaScriptCore
Apple 开发的开源 JavaScript 引擎。Safari 浏览器的内在引擎。
Github: https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore
SpiderMonkey
Mozilla 使用C/C++编写的 JavaScript 引擎。它被用于包括 Firefox 在内的多个 Mozilla 产品中。
官网: https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/SpiderMonkey/Releases
v8
Google 开发的开源 JavaScript 引擎,以高性能著称。被用于Chrome浏览器。
Github: https://github.com/v8/v8
Rhino
是一个完全使用 Java 语言编写的开源 JavaScript 实现,由 Mozilla 开发。是J2SE 6上的默认 Java 脚本化引擎。
Github: https://github.com/mozilla/rhino
JerryScript
JerryScript 是一款轻量级的 JavaScript 引擎,主要用于限制资源的微型设备。由三星开发。
Github: https://github.com/jerryscript-project/jerryscript
kjs
运行于 KDE 的 JavaScript 引擎。采用了 LGPL-2.1 License。
Github: https://github.com/KDE/kjs
Hermes
为运行 React Native 进行了优化的 JavaScript 引擎。由 facebook 提供。
Github: https://github.com/facebook/hermes
Chromium
Chromium 是一款基于 v8 的开源浏览器。
官网: https://chromium.googlesource.com/chromium/
Github: https://github.com/chromium/chromium
Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
官网: https://nodejs.org
Github: https://github.com/nodejs/node
中文学习网站: http://nodejs.cn
书籍:
https://github.com/alsotang/node-lessons
《深入浅出Node.js》
pm2
基于 Node.js 的一款自带负载均衡的进程管理器
官网: https://pm2.keymetrics.io
Github: https://github.com/Unitech/pm2
Deno
Deno 是一款运行于 Chrome v8 引擎的采用 Rust 编写的 JavaScript/TypeScript 运行环境
官网: https://deno.land
Github: https://github.com/denoland/deno
bun
bun 是一款集成 打包器、编译器、构建工具、包管理器的 JavaScript 运行环境。
官网: https://bun.sh/
Github: https://github.com/Jarred-Sumner/bun
测试框架
Puppeteer
Puppeteer 是一款通过 DevTools 协议控制 Chrome 或 Chrominm 的 js 库,它提供了一些高度封装的API,常用来做 UI 自动化测试。
Github: https://github.com/puppeteer/puppeteer
Cypress
UI 自动化测试框架
Github: https://github.com/cypress-io/cypress
Nightwatch
自动化端到端测试框架,基于 Node.js 使用 W3C Webdrivers(Selenium)
官网: https://nightwatchjs.org
Github: https://github.com/nightwatchjs/nightwatch
Selenium
浏览器自动化框架,封装了大量工具和库。
官网: https://www.selenium.dev
Github: https://github.com/SeleniumHQ/selenium
Mocha
一款简单可扩展的js测试框架,可在 Node.js 和 浏览器 环境中测试。
官网: https://mochajs.org
Github: https://github.com/mochajs/mocha
Jest
javascript 测试解决方案,由 facebook 开源。
官网: https://jestjs.io
Github: https://github.com/facebook/jest
AVA
一款 Nodejs 测试运行器
Github: https://github.com/avajs/ava
Tape
一款浏览器和 Nodejs 的测试框架
Github: https://github.com/substack/tape
服务器框架
Express
Express是一个流行的Node.js web开发框架。
官网: http://expressjs.com
Github: https://github.com/expressjs/express
中文学习网站: http://www.expressjs.com.cn/
Koa
使用ES6 async 方法来构建的有表现力的Node.js web开发框架。
官网: https://koajs.com
Github: https://github.com/koajs/koa
中文学习网站: https://koa.bootcss.com
Fastify
Fastify是一个Node.js web开发框架,注重于以最少的开销和强大的插件架构提供最佳的开发人员体验
Github: https://github.com/fastify/fastify
Nest
一款渐进式 Node.js web开发框架,用于构建高效、可扩展的服务器端应用程序,使用 Typescript 开发,支持面向对象编程(OOP),函数式编程(FP)及函数交互式编程(FRP),可以基于 Express 或 Fastify 扩展
官网: https://nestjs.com
Github: https://github.com/nestjs/nest
中文学习网站: https://docs.nestjs.cn
Egg
基于 Node.js 与 Koa 的企业级web开发框架,由阿里巴巴开发。
官网: https://eggjs.org
Github: https://github.com/eggjs/egg
中文学习网站: https://eggjs.org/zh-cn/
依赖管理
Yarn
一款快速、可靠、安全的依赖管理工具。
官网: https://yarnpkg.com
Github: https://github.com/yarnpkg/yarn
中文学习网站: https://yarn.bootcss.com
npm
最流行的 Javascript 包依赖管理工具。
官网: https://npm.community
Github: https://github.com/npm/cli
中文学习网站: https://www.npmjs.com.cn
有关常用server npm库,可查看 常用npm库
nvm
node版本管理器
Github: https://github.com/nvm-sh/nvm
代码规范
Standard Style Guide
js 样式规范&代码自动对齐规范
官网: https://standardjs.com
Github: https://github.com/standard/standard
Airbnb JavaScript Style Guide
Airbnb js样式规范
Github: https://github.com/airbnb/javascript
Google Style Guide
Google js样式规范
官网: https://google.github.io/styleguide/jsguide.html
Github: https://github.com/google/eslint-config-google
semver
语义化版本规范(Nodejs包的版本规范)
官网: https://semver.org
Github: https://github.com/semver/semver
编译与格式化工具/库
Babel
将特定Javascript先进语法进行编译的JavaScript 编译器。
官网: https://github.com/babel/babel
Github: https://github.com/babel/babel
中文学习网站:
https://babel.bootcss.com
swc
一款使用 Rust 开发的 Javascript/Typescript 编译器。
官网:
Github: https://github.com/swc-project/swc
Prettier
代码格式化工具
官网: https://prettier.io
Github: https://github.com/prettier/prettier
JSlint
Js 代码格式化工具 由 Douglas Crockford 开发
Github: https://github.com/douglascrockford/JSLint
JSHint
Js 静态代码分析工具 由 Anton Kovalyov 在 JSLint的基础上开发
官网:jshint.com
Github: https://github.com/jshint/jshint
ESLint
一个完全插件化的代码识别及格式报告工具,支持jsx。由 Nicholas Zakas 开发
官网: https://eslint.org
Github: https://github.com/eslint/eslint
中文学习网站: http://eslint.cn/
Esprima
一款高性能,符合标准的 ECMAscript 解析器, 采用 ECMAscript 编写
官网: https://esprima.org
Github: https://github.com/jquery/esprima
Espree
语言解析工具,可以将js解析为AST(抽象语法树),由 Esprima 发展而来, 支持ES6, ESLint采用该解析工具
Github: https://github.com/eslint/espree
Acorn
一款小巧、快速的 Javascript 语言解析器,由 Javascript 编写
Github: https://github.com/acornjs/acorn
Expat
采用 c99 编写的一款面向流的 XML 解析器。
Github: https://github.com/libexpat/libexpat
Terser
Github: https://github.com/terser/terser
一款支持ES6+的 Javascript 解析器/压缩工具集
PostCSS
用 JavaScript 工具和插件转换 css 代码的工具,autoprefixer 是它的插件
官网: https://postcss.org
Github: https://github.com/postcss/postcss
中文学习网站: https://www.postcss.com.cn
Terser
Js压缩混淆工具
Github: https://github.com/terser
Font-Awesome
Font Awesome 字体提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
官网: https://fontawesome.com
Github: https://github.com/FortAwesome/Font-Awesome
中文学习网站: http://www.fontawesome.com.cn
LinkChecker
死链接检查工具
Github: http://wummel.github.io/linkchecker/
blind_watermark
图片隐形水印添加工具
Github: https://github.com/guofei9987/blind_watermark
CI/CD
Travis
持续集成服务器解决方案
Github: https://github.com/travis-ci/travis-ci
官网: https://travis-ci.com
Jenkins
持续集成服务器解决方案,使用Java部署
Github: https://github.com/jenkinsci/jenkins
官网: https://www.jenkins.io
TeamCity
JetBrains提供的持续集成服务器解决方案
官网: https://www.jetbrains.com/teamcity/
跨平台
Electron
使用 JavaScript, HTML 和 css 构建跨平台的桌面应用框架。
官网: https://electronjs.org
Github: https://github.com/electron/electron
中文学习网站: https://www.electronjs.cn
nw.js
使用 JavaScript, HTML 和 css 构建跨平台的桌面应用框架。
官网: https://nwjs.io
Github: https://github.com/nwjs/nw.js
Meteor
Meteor 是一个用以采用纯 JavaScript 开发 web 和移动应用的完全开源的平台。支持 React、Blaze、Vue和Svelte框架开发。
官网: https://www.meteor.com
Github: https://github.com/meteor/meteor
Firebase
Firebase是一个移动应用程序开发平台,为开发者提供数据分析和数据库 web 服务。由Google驱动。
官网: https://firebase.google.com
Github: https://github.com/firebase
Supabase
Supabase 是 Firebase 的开源替代品。
官网: https://supabase.com
Github: https://github.com/supabase/supabase
Cordova
采用 HTML,CSS&JS 开发跨平台移动应用的开发框架
官网: https://cordova.apache.org
Github: https://github.com/apache/cordova-android
https://github.com/apache/cordova-ios
Ionic
Ionic是一款开源的移动应用开发框架。AngularJS移动端解决方案。
官网: https://ionicframework.com
Github: https://github.com/ionic-team/ionic-framework
NativeScript
NativeScript 是一个开源框架,用于使用 JavaScript 构建真正的本地移动应用程序。使用 web 技能,比如 Angular 和 Vue.js 、 FlexBox 和 CSS ,在 iOS 和 Android 上获得本地UI和性能。
官网: https://www.nativescript.org
Github: https://github.com/NativeScript/NativeScript
React Native(RN)
由facebook公司开发,支持使用React来构建原生移动应用的框架
官网: https://reactnative.dev
Github: https://github.com/facebook/react-native
Ignite
Ignite 是一套整合了 MobX 以及一些常见 UI 组件的 React Native 脚手架,提供了命令行 CLI、组件或是容器。
Github: https://github.com/infinitered/ignite
Metro
React Native 的 Javascript 打包器。由 facebook 提供。
官网: https://facebook.github.io/metro
Github: https://github.com/facebook/metro
Flutter
由 Google 采用 Dart 语言开发,用于创建高性能、跨平台的移动应用。
官网: https://flutter.io
Github: https://github.com/flutter/flutter
Weex
由 Alibaba 开发,用来创建移动端跨平台应用的框架。
官网: https://weex.apache.org
Github: https://github.com/apache/incubator-weex
Tauri
Tauri 是一款采用 Rust 开发的桌面端框架。
官网: https://tauri.studio
Githbu: https://github.com/tauri-apps/tauri
css扩展
Sass
css 扩展语言解析器
官网: http://sass-lang.com
Github: https://github.com/sass/sass
中文学习网站: https://www.sasscss.com
Less
css 预处理解析器
官网: http://lesscss.org
Github: https://github.com/less/less.js
中文学习网站:
http://lesscss.cn/
http://www.bootcss.com/p/lesscss/
https://less.bootcss.com
Stylus
css 预编译解析器
官网: http://stylus-lang.com
Github: https://github.com/stylus/stylus
中文学习网站: https://stylus.bootcss.com
html模板
mustache.js
HTML模板,特点是通过 {{mustache}}
引用变量
官网: https://mustache.github.io
Github: https://github.com/janl/mustache.js
Handlebars
html语义模板
官网: http://handlebarsjs.com
Github: https://github.com/wycats/handlebars.js
中文学习网站: https://handlebars.bootcss.com
Pug
html语义模板
官网: https://pugjs.org
Github: https://github.com/pugjs/pug
中文学习网站: https://pug.bootcss.com/api/getting-started.html
Liquid
html语义模板
官网: http://liquidmarkup.org/
Github: https://github.com/Shopify/liquid
中文学习网站: https://liquid.bootcss.com
EJS
嵌入式 JavaScript 模板引擎,特点是通过 <%= EJS %>
将 js 语法嵌入 HTML
官网: http://ejs.co
github: v1: https://github.com/tj/ejs v2: https://github.com/mde/ejs
中文学习网站: https://ejs.bootcss.com
静态站点生成
Jekyll
Jekyll 是一个使用 Ruby 编写的博客流静态站点生成器
官网: https://jekyllrb.com
Github: https://github.com/jekyll/jekyll
中文学习网站: https://www.jekyll.com.cn/
Hexo
一个快速、简单及强力的博客框架,由 Node.js 支持
官网: https://hexo.io
Github: https://github.com/hexojs/hexo
中文学习网站: https://hexo.bootcss.com
Vuepress
极简的 Vue 驱动的静态站点生成器
官网: https://vuepress.vuejs.org
Github: https://github.com/vuejs/vuepress
中文学习网站: https://vuepress.vuejs.org/zh/
Gatsby
基于 React 的静态站点生成器
官网: https://www.gatsbyjs.com
Github: https://github.com/gatsbyjs/gatsby
中文学习网站: https://www.gatsbyjs.cn/docs/
docsify
文档站点生成器
官网: https://docsify.js.org
Github: https://github.com/docsifyjs/docsify
WordPress
静态网站和博客生成框架
官网: https://wordpress.org/
Github: https://github.com/WordPress/WordPress
jsdoc
一款 JavaScript API 文档生成器
Github: https://github.com/jsdoc/jsdoc
css库
normalize.css
一款css库,用以针对不同浏览器的默认CSS样式进行重置,来减少浏览器之间的样式差异
官网: http://necolas.github.io/normalize.css/
Github: https://github.com/necolas/normalize.css
Animate.css
一款css动画库,包含了众多css动画效果,跨浏览器开箱即用
Github: https://github.com/animate-css/animate.css
Bluma
一款基于 Flexbox 的 css 框架
官网: https://bulma.io
Github: https://github.com/jgthms/bulma
其它库与工具
网络请求
socket.io
实时双向基于事件的通信框架,采用 Typescript 编写,同时也有 Java、C++、Swift、Dart、Python 等其它语言版本
官网: https://socket.io
Github: https://github.com/socketio/socket.io
Axios
Axios 是一个基于 Promise 的可以运行在浏览器和 Node.js 中的HTTP客户端库。
Github: https://github.com/axios/axios
中文学习网站: http://www.axios-js.com
图表&动画
D3
一款数据可视化库,支持采用 SVG、Canvas 与 HTML 渲染。
官网: https://d3js.org
Github: https://github.com/d3/d3
中文学习网站: https://www.d3js.org.cn
three.js
使用默认 WebGL 渲染的 Javascript 3d 库
官网: https://threejs.org
Github: https://github.com/mrdoob/three.js
anime.js
一款轻量级的 Javascript 动画库
官网: https://animejs.com
Github: https://github.com/juliangarnier/anime
PixiJS
Pixi是一个非常快的2D sprite渲染引擎,可以用来做游戏渲染
官网: https://pixijs.com
Github: https://github.com/pixijs/pixijs
中文学习网站: https://pixijs.huashengweilai.com
Babylon.js
Babylon是一个强力的3D游戏渲染引擎
官网: https://www.babylonjs.com
Github: https://github.com/BabylonJS/Babylon.js
Chart.js
基于 canvas 的简单的HTML5图表库
官网: https://www.chartjs.org
Github: https://github.com/chartjs/Chart.js
Mermaid
Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改,使用了 d3.js 来生成图形
Github: https://github.com/mermaid-js/mermaid
Echarts
一款图表与可视化的库
官网: https://echarts.apache.org/zh/index.html
Github: https://github.com/apache/echarts
Highcharts
一款基于 SVG 的 JavaScript 图表库
官网: www.highcharts.com
Github: https://github.com/highcharts/highcharts
日期&时间
Moment.js
一款 js 日期库,可以方便的对日期进行解析、校验、操作与格式化显示
官网: https://momentjs.com
Github: https://github.com/moment/moment
Luxon
一款 js 日期与时间库
Github: https://github.com/moment/luxon/
Day.js
一款 js 日期库,只有2kB
官网: https://day.js.org
Github: https://github.com/iamkun/dayjs
中文网站: https://dayjs.gitee.io/zh-CN/
date-fns
一款 js 日期库,提供了多种日期相关基础方法
官网: https://date-fns.org
Github: https://github.com/date-fns/date-fns
日志&数据可视化平台
Sentry
前端错误监控服务
官网: https://sentry.io
Github: https://github.com/getsentry/sentry
中文学习文档: https://zhuanlan.zhihu.com/p/161276192
Rollbar.js
Javascript 错误捕捉与日志分析框架
Github: https://github.com/rollbar/rollbar.js
Front.js
前端错误监控平台
官网: https://www.frontjs.com
Fundebug
前端错误监控平台
官网: https://www.fundebug.com
Bugsnag
前端错误监控平台
官网: https://www.bugsnag.com
Github: https://github.com/bugsnag/bugsnag-js
Grafana
一款开源的数据可视化平台
官网: https://grafana.com
Github: https://github.com/grafana/grafana
Superset
官网: 一个现代的、企业级的商业智能(BI)web应用
Github: https://github.com/apache/superset
Ghost
官网: 一款开源的内容管理系统(CMS),基于 Node.js 。
官网: https://ghost.org
Github: https://github.com/TryGhost/Ghost
API管理
Yapi
接口管理平台
官网: https://hellosean1025.github.io/yapi
Github: https://github.com/YMFE/yapi
Swagger
接口管理平台
官网: https://swagger.io
Github: https://github.com/swagger-api
strapi
接口管理平台
官网: https://strapi.io
Github: https://github.com/strapi/strapi
json-server
接口测试工具,可以通过配置json文件生成快速原型的后端接口响应
Github: json-server
代码编辑与管理
Git
代码版本管理工具。
官网: https://git-scm.com
Github: https://github.com/git/git
中文学习网站: https://progit.bootcss.com
学习文档: [Git小抄(/blog/2019/02/01/FE-Git小抄/)
其它组件&API&工具
video.js
video.js是一款开源的 HTML5&Flash 音频播放器组件
官网: https://videojs.com
Github: https://github.com/videojs/video.js
sheet.js
sheetjs是一个各种电子表格格式的解析器和编写器组件
官网: https://sheetjs.com/
Github: https://github.com/SheetJS/sheetjs
pdf.js
一个基于web标准的通用平台,用于解析和呈现PDF
官网: https://mozilla.github.io/pdf.js/
Github: https://github.com/mozilla/pdf.js
clipboard.js
一款将文本复制到剪贴板的库
官网: https://clipboardjs.com
Github: https://github.com/zenorocha/clipboard.js
handsontable
handsontable 是一款 JavaScript/HTML5数据网格与电子表格的组件。可用于 React 、 Vue 和 Angular 。
官网: https://handsontable.com
Github: https://github.com/handsontable/handsontable
intro.js
introjs是一个新功能介绍和步进用户指导的组件
官网: https://introjs.com
Github: https://github.com/usablica/intro.js
timesheet.js
timesheetjs是一个时间线组件
官网: https://sbstjn.github.io/timesheet.js
Github: https://github.com/sbstjn/timesheet.js
reveal.js
在线ppt制作工具
官网: https://revealjs.com
Github: https://github.com/hakimel/reveal.js
impress.js
ppt制作框架,基于CSS3提供的变化和转换能力
官网: https://impress.js.org/#/bored
Github: https://github.com/impress/impress.js
faker.js
一款可以在 Node.js 和浏览器环境中可创造假数据的库
Github: https://github.com/Marak/faker.js
immutable-js
Javascript的不可变持久数据集合,提高了效率和简单性
Github: https://github.com/immutable-js/immutable-js
FileSaver.js
H5 文件保存方案
Github: https://github.com/eligrey/FileSaver.js
StreamSaver.js
H5 文件保存方案
Github: https://github.com/jimmywarting/StreamSaver.js
Leaflet
移动端友好的开源地图js库
官网: https://leafletjs.com
Github: https://github.com/Leaflet/Leaflet
blind-watermark
用于给图片添加隐形水印
Github: https://github.com/Sherryer/blind-watermark
interact.js
支持 JavaScript拖放、调整大小和多点触摸手势,具有惯性和捕捉功能,适合现代浏览器
官网: http://interactjs.io/
Github: https://github.com/taye/interact.js
simple-keyboard
Javascript虚拟键盘-可定制、响应灵敏、轻量级
官网: https://virtual-keyboard.js.org/
Github: https://github.com/hodgef/simple-keyboard
Serverless
Serverless Framework 是一个命令行工具用以快速部署无服务器(serverless)应用,它使用基于事件触发的计算资源(例如腾讯云云函数 SCF,AWS Lambda)
官网: http://www.serverless.com
Github: https://github.com/serverless/serverless
Hyper
采用 HTML/JS/CSS 编写的终端命令行工具
官网: https://hyper.is
Github: https://github.com/vercel/hyper
Quill
一款所见即所得的富文本编辑器
官网: https://quilljs.com
Github: https://github.com/quilljs/quill
storybook
UI组件开发与测试环境
官网: https://storybook.js.org
Github: https://github.com/storybookjs/storybook
Yoga
Yoga 是一款实现了 Flexbox 的跨平台的布局引擎,由 facebook 提供
官网: https://yogalayout.com
Github: https://github.com/facebook/yoga
React-pdf
React-pdf 是一款支持在浏览器和服务器环境下创建 PDF 文件的 React 渲染器
官网: https://react-pdf.org
Github: https://github.com/diegomura/react-pdf
Watchman
Watchman 是一款便捷工具,用于监视文件变更并记录或触发某些操作。由 facebook 提供。
官网: https://facebook.github.io/watchman
Github: https://github.com/facebook/watchman