awesome-f2e-libs菜鸟教程下载
GitHub:https://github.com/sorrycc/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
