awesome-f2e-libs

awesome-f2e-libs 介绍

整理我平时关注的前端库。

打包工具

webpack - 打包项目。rollup - 打包 npm 库。parcel - webpack 竞品，但发展前景不乐观，再观察一段时间。@pikapkg/pack - 又一组件打包工具。systemjs - 针对一些特殊场景会比较有用，比如云 ide，支付宝小程序 IDE 等。microbundle - 基于 rollup，简化配置。bili - 基于 rollup，同上。webpack-dev-server - webpack 开发服务器。webpack-dev-middleware - webpack 中间件。vue-cli - vue 命令行工具。create-react-app - react 官方脚手架。webpack-merge - 合并 webpack 配置。webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。prepack - 通过预先执行的方式优化打包结果。swc - 基于 rust 的语法转换器，babel 的竞争者。nathan/pax - 基于 rust，据说是这个星球最快的 JavaScript 打包工具。pikapkg/web - 浏览器里跑 npm 依赖，面向现代浏览器。lebab/lebab - 把 es5 代码转成 es6，反向 babel。palmerhq/tsdx - Zero-config CLI for TypeScript package development.

webpack loader 和插件

hard-source-webpack-plugin - 性能提升 70%，但有坑。

svgr - svg 转 react 组件。

postcss - css 界的 babel。

autoprefixer - 为 css 选择权自动加 prefix。

cssnano - css 压缩，也有类 preset 的概念。

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

webpackbar - webpack 进度条。

webpack-bundle-analyzer - 构建产物占比分析。

uglifyjs-webpack-plugin - js 压缩，产物为 ES5 语法。

terser-webpack-plugin - js 压缩，产物为 ES6 语法。

webpack-manifest-plugin - 生成 manifest.json。

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

case-sensitive-paths-webpack-plugin - 大小写敏感检测，能规避一些问题，但构建时性能消耗较大。

css-hot-loader - css 热更新，搭配 mini-css-extract-plugin 使用。

duplicate-package-checker-webpack-plugin - 重复依赖检测。

fork-ts-checker-webpack-plugin - ts 语法检测。

speed-measure-webpack-plugin - 统计 webpack 各阶段耗时。

包管理

yarn - 我用这个。

npm

babel

babel

babel-plugin-rawest - react 的 DOM 直出方案。

babel-plugin-macros - 前端文件写 node 逻辑。

babel-plugin-dynamic-import-node - 有些场景下会需要禁用 import() 语法。

babel-plugin-react-require - 自动为 jsx 语法加 react 引用。

babel-plugin-transform-react-remove-prop-types - 删除 prop-types，生产环境用。

测试

jest

ts-jest

enzyme

jsdom

puppeteer

react-test-rerender - 官方出品。

react-testing-library - kentcdodds 出品。

框架

react

vue

next.js

nuxt.js

gastby

umi - 蚂蚁金服的前端框架，我目前在维护。

rekit - IDE and toolkit for building scalable web applications with react,Redux and react-router.

choo - dva 最初的 API 是参考这个实现的，已经不怎么发展了，再关注一段时间。

Taro - 用 react 写小程序，适配微信和支付宝等。

after.js

mint - 提供了语言层方案的框架。

quasar - 基于 vue，一套代码多处适用。

react 相关库

preact - 轻量级 react 实现。

inferno - 轻量级 react 实现。

react-router - React 路由方案。

reach-router - React 路由方案，较新，优势是可访问性。

router5 - 通用的路由方案。

react-loadable - 按需加载 react 组件。

ant-design - 蚂蚁金服的 React UI 库。

material-ui - UI 库。

react-intl - React 的国际化方案。

react-dnd - 拖拽实现。

react-helmet - 修改 html 的 header 内容。

react-jsonschema-form - A React component for building Web forms from jsON Schema.

vue 相关库

vue-router

工具类

history

path-to-regexp - path 转正则，路由相关处理的底层库。

lodash - 工具集合。

fastclick

date-fns - 时间处理。

数据流

redux

immer

mobx

unstated

rxjs

dva - 我写的数据流，基于 redux。

rematch - 基于 redux。

vuex

ngrx

redux 扩展

react-redux - 绑定 react 和 redux。

redux-saga

redux-persist

redux-bundler

redux-Box

性能优化

workBox - PWA 方案，Google 出品。

critical - 提取关键 css。

语言

typescript

flow

graphql

文档

vuepress

docz

storybook

mdx - jsx + markdown。

工程

lerna - monorepo 管理。

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

eslint - js 风格约束。

eslint-config-airbnb

xo - 封装自 eslint。

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

yeoman-generator - 脚手架工具。

serve - 本地静态服务器。

servor - 另一个静态服务器。

budo - 又一个静态服务器。

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 - 监听文件变动然后做一些事。

just - 微软出的任务管理器。

tern - 代码分析器，为不少编辑器服务。

编辑器

VSCode

IntelliJ IDEA - 我用这个。

codesandBox

stackblitz

CloudIDE

theia

che

codesandBox-client

字体

FiraCode

Dank Mono

Operator Mono

css

css modules

emotion

命令行

yargs - 命令行入口套件。

yargs-parser - 命令行参数解析。

chalk - 输出不同颜色。

cheerio - 用类 jQuery 语法处理 html。

chokidar - 文件监听。

clipboardy - 复制文本到粘贴板。

debug - 打印调试信息。

deprecate - 给过期警告。

glob - 文件查找。

tiny-glob - 文件查找。

signale - 漂亮的日志打印。

semver - semver 版本处理。

update-notifier - 更新提醒。

rimraf - 删除文件。

depd - 给出 deprecated 警告。

execa - 比 child_process 好用，返回 Promise。

ora - 控制命令行光标，显示 loading 等。

inquirer - 交互式命令接口，比如 prompt。

enquirer - 同上，更 cool 一些。

ajv - 参数校验。

ink - 用 React 处理命令行输出。

figures - ✔︎ 等特殊字符，做了 windows 兼容处理。

请求处理

whatwg-fetch

got

axios

request

reqwest

压缩解压缩

yazl - zip 压缩。

yauzl - zip 解压缩。

tar-fs - tar 的压缩和解压缩。

语法解析

esquery - 语法树查询。

Markdown

remark - Markdown 语法解析器。

markdown-it - Markdown 转 html。

其他

electron

DeskGap - 类 electron，由于不包含浏览器的部分，所以产物更小

fx - 交互式 jsON 查看。

rtfs

reactjs/rfcs

eslint/rfcs

vuejs/rfcs

yarnpkg/rfcs

npm/rfcs

gastbyjs/rfcs

nuxtjs/rfcs

GitHub:https://github.com/sorrycc/awesome-f2e-libs

网站描述:整理我平时关注的前端库

awesome-f2e-libs

官方网站：