滚动条
http://grsmto.github.io/simplebar/
Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
Loading
css-loader
只用 div 和 纯 CSS 制作的简单的加载动画
https://www.awesomes.cn/repo/raphaelfabeni/css-loader
滚动
Reveal Animations When You Scroll
为滚动页面进入可视区域的元素添加动画。
- Wow.js 商业需要付费
- scrollReveal.js
- Waypoints.js
Video
- Chimee 奇舞团
- flv.js
- ckplayer
音频
howler.js
图表
antv
输入
格式化输入
Cleave.js
打包工具
- webpack - 打包项目。
- rollup - 打包 npm 库。
- nathan/pax - 基于 rust,据说是这个星球最快的 JavaScript 打包工具。
- webpack-dev-server - webpack 开发服务器。
- webpack-dev-middleware - webpack 中间件。
- webpack-merge - 合并 webpack 配置。
- webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。
请求处理
命令行
- yargs - 命令行入口CLI套件。
- 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 兼容处理。
工程
- np - npm publish 辅助,自动 push、打 tag、升版本等。
- lint-staged - eslint 提速,只 lint 提交的代码。
- npm-check - 检测依赖升级情况,我会和
yarn upgrade-interactive
配合着用,主要用来检测冗余依赖。 - concurrently - 在 npm scripts 里并行执行命令。
- nvm - 管理 node 版本。
- coveralls - 覆盖率。
- husky - 添加 git hooks。
- cross-env - 跨平台的环境变量声明。
- serve - 本地静态服务器。
- npx 不用安装执行
- bwoser-sync 检测文件改动实时刷新
- eslint - JS 风格约束。
文档
redux 扩展
- react-redux - 绑定 react 和 redux。
- redux-saga
- redux-persist
- redux-bundler
- redux-box
数据流
工具类
- history
- path-to-regexp - path 转正则,路由相关处理的底层库。
- lodash - 工具集合。
- fastclick
- date-fns - 时间处理。
- dayjs - 时间处理
- number-precision 数值处理
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.
测试
- jest
- ts-jest
- enzyme
- jsdom
- puppeteer
- react-test-rerender - 官方出品。
- react-testing-library - kentcdodds 出品。
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 各阶段耗时