awesome-fe-libs

滚动条

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 配置。

请求处理

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

命令行

• 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 风格约束。

文档

• vuepress
• docz
• storybook
• mdx - jsx + markdown。

redux 扩展

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

数据流

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

工具类

• 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 各阶段耗时

参考

https://github.com/sorrycc/awesome-javascript

更新: 2019-09-16 17:56:34
原文: https://www.yuque.com/u3641/dxlfpu/vu2tg3