前端必知工具/框架

日期:2016-5-4 13:51 | 标签: | 阅读:634

项目大了,人老了,但又想速度快,那你就得找工具求助了,还好现在工具市场一片繁荣,我们可以好好地利用这些框架或工具为我们服务。(此文持续更新)

开发协作

https://gitee.com/enterprises/new

vorlonjs

http://www.vorlonjs.io/

JavaScript 远程调试工具

react-perf-devtool

https://github.com/nitin42/react-perf-devtool

A chrome devtool extension for inspecting the performance of React Components

作图工具

http://canvas.qq.com ,可以做出炫酷的统计报表图片

2017—08—18

puppeteer transform-www,可以转化 html css js 格式

2016 年我最喜欢的前端工具(知乎)

https://zhuanlan.zhihu.com/p/24687464

Yeoman

脚手架工具。具体介绍可参考:Yeoman

框架

  1. bulma
    A modern CSS framework based on Flexbox 链接:http://bulma.io/
  2. PostCss
    更有效率,但需要简单配置的css模块化工具
  3. Electron
    构建桌面应用程序的javascript库
  4. GraphQL
    直接看查询语句就能知道查询出来的数据是什么样的。你可以把 GraphQL 的查询语句想成是没有值,只有属性的对象,返回的结果就是对应的属性还有对应值的对象
  5. chaijs
    github:https://github.com/chaijs/chai
    BDD/TDD assertion framework for node.js and the browser that can be paired with any testing framework. http://chaijs.com

cmder

nice console emulators on Windows
http://cmder.net/

caniuse

想知道各大浏览器对HTML5属性的支持情况,点击这个吧:
http://caniuse.com/

autoprefixer

css3的很多属性都得加上浏览器前缀,用手写实在太麻烦,不放试试这个:
https://github.com/postcss/autoprefixer#autoprefixer-

xceptor

有时候是不是想对ajax请求统一加一层验证,那么请参考:
https://github.com/YanagiEiichi/xceptor

jsfiddle

写代码测试很麻烦?开个tab页就直接开些吧。

macacajs

自动化测试集成框架,不断地写代码,偶尔也得测测吧 https://macacajs.github.io/macaca/getting-started.html

SVG Sprites

阿里矢量图库,超省事: http://iconfont.cn

joi

Object schema validation,GitHub: https://github.com/hapijs/joi
以后写表单验证可以直接这么写:

var Joi = require('joi');
var schema = Joi.object().keys({
    username: Joi.string().alphanum().min(3).max(30).required(),
    password: Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/),
    access_token: [Joi.string(), Joi.number()],
    birthyear: Joi.number().integer().min(1900).max(2013),
    email: Joi.string().email()
}).with('username', 'birthyear').without('password', 'access_token');
Joi.validate({ username: 'abc', birthyear: 1994 }, schema, function (err, value) { });  // err === null -> valid

npm script

工程化脚本利器:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

esprima

ECMAScript parsing infrastructure for multipurpose analysis,适用于dom分析
https://github.com/jquery/esprima

vivus

JavaScript library to make drawing animation on SVG

caddy

GO语言写的一个支持http2.0以及自动https的服务器
地址: https://github.com/mholt/caddy

演示

作为web工程师可不能使用PPT那么老掉牙的东西,何不借助web力量呢:
http://www.geekfan.net/8107
reveal.js
http://lab.hakim.se/reveal-js/#/

大公司都在用什么工具

偶然看到一贴,看看:https://www.zhihu.com/question/28638304

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式