fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

awesome-f2e-libs
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

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


链接: https://fly63.com/nav/2348

more>>
相关栏目
remove.bg
消除图片背景:100% 自动 – 只需 5 秒
官网
阿里云DataV
地图数据
官网
Apifox
API 文档、API 调试、API Mock、API 自动化测试一体化协作平台
官网
易文档
需求文档、API文档、部署文档到使用手册
官网
mdx-deck
基于MDX的演示文稿
官网GitHub
YouCompress
在线免费文件压缩工具
官网
iHateRegex
快速搜索并匹配到合适的正则表达式
官网GitHub
Trilium Notes
层级结构的笔记程序,专注构建个人的大型知识库
点击进入GitHub
CodeZen
在线源代码转图片工具
官网
pngtosvg
在线PNG转SVG转换工具
官网
PDFgear
高效的 PDF 在线工具
官网
HackMD
一款超级好用的在线Markdown编辑器
官网GitHub
Hexnaw
在线网站配色评分工具
官网
糯词笔记
最佳读书笔记管理工具
官网
压缩图
在线图片压缩工具集合
官网
VectorCreator
简报插图创作工具
官网

手机预览