22
GitHub - sorrycc/awesome-f2e-libs: ? 整理我平时关注的前端库。
source link: https://github.com/sorrycc/awesome-f2e-libs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
awesome-f2e-libs
? 整理下我平时关注的前端库。
打包工具
- webpack - 打包项目。
- rollup - 打包 npm 库。
- parcel - webpack 竞品,但发展前景不乐观,再观察一段时间。
- systemjs - 针对一些特殊场景会比较有用,比如云 ide,支付宝小程序 IDE 等。
- microbundle - 基于 rollup,简化配置。
- webpack-dev-server
- webpack-dev-middleware
- vue-cli
- create-react-app
- webpack-merge - 合并 webpack 配置。
- webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。
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 - 重复依赖检测。
包管理
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-react-remove-prop-types - 删除 prop-types,生产环境用。
测试
- jest
- ts-jest
- enzyme
- jsdom
- puppeteer
- react-test-rerender - 官方出品。
- react-testing-library - kentcdodds 出品。
框架
react 相关库
- preact
- inferno
- react-router
- reach-router
- router5
- react-loadable
- ant-design
- material-ui
- react-intl
- react-dnd
- react-helmet
vue 相关库
工具类
数据流
redux 扩展
- react-redux - 绑定 react 和 redux,这个名字取得不好,react-redux 还是 redux-react 老是记不清楚。
- redux-saga
- redux-persist
- redux-bundler
- redux-box
性能优化
语言
文档
工程
- lerna - monorepo 管理。
- lerna-changelog - 为 lerna 项目自动生成 changelog。
- eslint - JS 风格约束。
- eslint-config-airbnb
- prettier - 更主观的风格自动修改。
- yeoman-generator - 脚手架工具。
- serve - 本地静态服务器。
- np - npm publish 辅助,自动 push、打 tag、升版本等。
- lint-staged - eslint 提速,只 lint 提交的代码。
- coveralls - 覆盖率。
- husky - 添加 git hooks。
- cross-env - 跨平台的环境变量声明。
- projj - 本地 git 项目管理,支持 github 和 gitlab。
编辑器
- VSCode
- IntelliJ IDEA - 我用这个。
- codesandbox
- stackblitz
css
命令行
- yargs - 命令行入口套件。
- yargs-parser - 命令行参数解析。
- chalk - 输出不同颜色。
- cheerio - 用类 jQuery 语法处理 HTML。
- chokidar - 文件监听。
- clipboardy - 复制文本到粘贴板。
- debug - 打印调试信息。
- deprecate - 给过期警告。
- glob - 文件查找。
- signale - 漂亮的日志打印。
- semver - semver 版本处理。
- update-notifier - 更新提醒。
- rimraf - 删除文件。
请求处理
其他
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK