序言
期望有那么一两个工具能让你眼前一亮。
这个列表包含许多种类的资源，所以这里将它们分组整理 并附相关链接
CSS 库 / 设计相关
-
Bulma一Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页
-
Foundation一Foundation号称世界上最先进的响应式前端框架
-
Spectre.css一Spectre.css一个 轻量级， 响应和 现代 CSS框架
-
Animate.css — 动画库
-
Flat UI Colors — 扁平化设计配色
-
Material design lite— 基于 Google material design 的框架
-
Colorrrs — 随机颜色生成器
-
Section separators — CSS 实现区域分割
-
Topcoat — 框架
-
Create ken burns effect — 使用 CSS3 动画实现 Ken burns 特效
-
DynCSS — 给 CSS 添加 function，动态化 CSS
-
CSSpin — css spinners 合集
-
Feather icons — Icon 集合
-
Ion icons — Icon 集合
-
Font awesome — Icon 集合
-
Font generator — 组合多个字体创建混合字体
pure.css 一组小型的自适应CSS模块
纯前端 Javascript 相关
-
Particles.js— 用于创建粒子的轻量级JavaScript库
-
Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库
-
Fullpage.js— 快速实现全屏滚动特性
-
Typed.js — 打字机效果
-
Waypoints.js — 滚动到某个元素位置时触发一个功能
-
Highlight.js — web 语法高亮
-
Chart.js — 使用 JavaScript 创建漂亮的图表
-
Instantclick — 能够明显加速网站加载时间，鼠标 hover 时预加载资源
-
Chartist — 另一个图表库
-
antv —蚂蚁金服全新一代数据可视化解决方案
-
Barba.js — 流式页面过渡
-
Vivus.js — 在 SVG 上绘制动画
-
Wow.js — 滚动时展现动画
-
Animate on scroll — 漂亮的页面滚动元素动画
-
jInvertScroll — 视差滚动
-
Parallax.js — 对智能设备方向变化做出响应的视差引擎
-
Typeahead.js — 搜索补全
-
Bounce.js — 创建炫酷的 CSS3 动画
-
Pagepiling.js — 全屏滚动
-
Multiscroll.js — 两列垂直反向滚动
-
Favico.js — 动态 favicon
-
Midnight.js — 固定头部切换效果
-
Sortable — 拖拽插件
-
Slideout.js — 移动应用侧滑导航
-
Cleave.js — 实时格式化输入内容
-
Shepherd.js — 为应用创建新手引导
-
IziToast — 通知弹窗实现
nodejs 工具
-
standard-傻瓜式的 Javascript 语法检查工具
-
david-帮你找到已经过期的依赖包
-
nrm NPM注册表管理器 (方便换源)
-
nvm：Node 版本管理器
-
localtunnel-把本机服务暴露到外网
-
nodemon — 自动重启 NodeJS 应用
-
pm2 — 便捷管理 node 服务进程
-
Handlebars.js — Javascript 模板引擎
-
node-clinic — 一个开箱即用的 Node.js 应用诊断工具。
babel
- babel
- babel-plugin-macros - 前端文件写 node 逻辑。
- babel-plugin-dynamic-import-node - 有些场景下会需要禁用
import()语法。 - babel-plugin-react-require - 自动为 jsx 语法加 react 引用。
- babel-plugin-rawest - React 的 DOM 直出方案。
- babel-plugin-transform-react-remove-prop-types - 删除 prop-types，生产环境用。
打包工具
- vue-cli - vue 命令行工具。
- create-react-app - react 官方脚手架。
- webpack-merge - 合并 webpack 配置。
- webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。
- prepack - 通过预先执行的方式优化打包结果。
- lebab/lebab - 把 es5 代码转成 es6，反向 babel。
- webpack - 打包项目。
- rollup - 打包 npm 库。
- systemjs - 针对一些特殊场景，比如云 ide，支付宝小程序 IDE 等。
- microbundle - 基于 rollup，简化配置。
- bili - 基于 rollup，同上。
- webpack-dev-server - webpack 开发服务器。
- webpack-dev-middleware - webpack 中间件。
抓包工具
whistle-HTTP，HTTP2，HTTPS，Websocket调试代理
wireshark-免费的抓包工具
测试
- puppeteer 该库也可用来写爬虫
- jest
- enzyme
- jsdom
- react-test-rerender - 官方出品。
- react-testing-library - kentcdodds 出品。
文档
命令行
- update-notifier - 更新提醒。
- rimraf - 删除文件。
- depd - 给出 deprecated 警告。
- yargs - 命令行入口套件。
- yargs-parser - 命令行参数解析。
- chalk - 输出不同颜色。
- cheerio - 用类 jQuery 语法处理 HTML。
- chokidar - 文件监听。
- clipboardy - 复制文本到粘贴板。
- debug - 打印调试信息。
- deprecate - 给过期警告。
- glob - 文件查找。
- tiny-glob - 文件查找。
- signale - 漂亮的日志打印。
- semver - semver 版本处理。
- execa - 比 child_process 好用，返回 Promise。
- ora - 控制命令行光标，显示 loading 等。
- inquirer - 交互式命令接口，比如 prompt。
- enquirer - 同上，更 cool 一些。
- ajv - 参数校验。
- ink - 用 React 处理命令行输出。
工程
- projj - 本地 git 项目管理，支持 github 和 gitlab。
- 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 - 跨平台的环境变量声明。
- concurrently - 在 npm scripts 里并行执行命令。
- @zeit/ncc - 打包为 npm 包为一个文件。
- npm-check - 检测依赖升级情况，我会和
yarn upgrade-interactive配合着用，主要用来检测冗余依赖。 - cpx - 复制，支持 glob，并且可以 watch。
- onchange - 监听文件变动然后做一些事。
- just - 微软出的任务管理器。
- tern - 代码分析器，为不少编辑器服务。
欢迎关注我的公众号FE未道 ，不间断更新， 我们一起脚踏实地，仰望星空。
