关注的轮子

[Zenquan]

跨端开发框架

taro: 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用。
anu: the React16-compat mini library
omi

[Zenquan]

业务、工具类

• Numeral-js: A javascript library for formatting and manipulating numbers.
• history
• path-to-regexp
• lodash
• fastclick
• core-js: Standard Library

[Zenquan]

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 - 重复依赖检测。

[Zenquan]

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，生产环境用。

[Zenquan]

测试

• jest
• ts-jest
• enzyme
• jsdom
• puppeteer
• react-test-rerender - 官方出品。
• react-testing-library - kentcdodds 出品。

[Zenquan]

框架

• react
• vue
• next.js
• nuxt.js
• gastby
• umi - 蚂蚁金服的前端框架。
• choo - dva 最初的 API 是参考这个实现的，已经不怎么发展了，再关注一段时间。
• taro - 用 React 写小程序，适配微信和支付宝等。
• after.js

react 相关库

• react-transition-group: An easy way to perform animations when a React component enters or leaves the DOM
• 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 内容。

[Zenquan]

数据流

• redux
• immer
• mobx
• unstated
• rxjs
• dva - 基于 redux。
• rematch - 基于 redux。

redux 扩展

• react-redux - 绑定 react 和 redux。
• redux-saga
• redux-persist
• redux-bundler
• redux-box

[Zenquan]

性能优化

• workbox - PWA 方案，Google 出品。
• critical - 提取关键 CSS。
• happypack: Happiness in the form of faster webpack build times.
• webpack-bundle-analyzer: Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

[Zenquan]

语言

• typescript
• flow
• graphql

[Zenquan]

工程

• 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。
• nvm - 管理 node 版本。

[Zenquan]

命令行

• yargs - 命令行入口套件。
• yargs-parser - 命令行参数解析。
• chalk - 输出不同颜色。
• cheerio - 用类 jQuery 语法处理 HTML。
• chokidar - 文件监听。
• clipboardy - 复制文本到粘贴板。
• debug - 打印调试信息。
• deprecate - 给过期警告。
• glob - 文件查找。
• signale - 漂亮的日志打印。
• semver - semver 版本处理。
• update-notifier - 更新提醒。
• rimraf - 删除文件。
• depd - 给出 deprecated 警告。

[Zenquan]

请求处理

• whatwg-fetch
• got
• axios
• request
• reqwest

[Zenquan]

css

• css modules
• emotion
• awesome-css-frameworks