写在前面的话

 

哈喽——各位前端狗们！接下来你们将看到一个超级屌的工具集合框架列表（有没有点小激动）。你可以挑你比较熟悉的选项来组织，甚至如果你够屌，就自己造一个轮子，完全不用鸟它们。

 

这篇博文主要是为了让你了解现在前端圈子里面大家都在玩些啥。 同时也可以作为一个工具清单来帮助你挑选你需要的工具库。

 

自己会用他吗？

 

“ 嗯，我用它来做我组装框架的参考——”

 

当然，这也是我需要给经常问“我该用什么框架的人”说的一些话。你知道的，没有绝对的对和错，但为了治好选择恐惧症，我还是会给出了一个框架以供参考。

 

最后 我更新这篇文章， 是因为的确有些东西改变了我的想法，让我学到很多。同时，也因为，当你来这里读文章时已经有37个新框架发布了ORZ。。

 

从何说起？

 

如果你构建不是一些很小的或者随时可以扔掉的项目，那么你需要这些东西：

 

模块化你的项目

 

我偏爱组件化的架构，他适用于各种框架

 

当然也有一些例外 比如 BOT 或者Elm Architecture 或者 re-frame 或者 CycleJS.

 

模块加载器/包装器 （RequireJS，Browserify ，Webpack，ComponentJS ，Systemjs）它们能让你的js或者组件 更加解藕易管理

 

包管理器npm，jspm, bower

 

相比而言我更喜欢npm，在js和nodejs世界里面它是一个不成文的标准。

 

当然，bower 相当于是一种黑科技，它在下载资源库上表现不错，但在组件和依赖管理上还是没有npm的表现抢眼. 当然你可能有不同的观点。

 

自动化构建工具(grunt/gulp/broccoli)

 

你懂的，生命有限，没必要浪费重复性的劳动上。

 

CSS 预处理器 (jss/stylus/sass/css-modules) 以及CSS 后处理器 (csso, autoprefixer, postcss）

 

这些工具让css丢掉累赘更好的处理跨平台问题 （是的，虽然已经是这么多年了 ，但是还是有很多东西需要我们去帮忙擦屁股）

 

CSS/HTML框架 (Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

 

这些吸纳了很多知识和上千年的web开发者痛苦教训的沉淀，它将帮助你解决你的基础标记和样式。

 

尽管，如果你觉得你是标记语言大牛或着前端砖家，你可能会考虑构建你们自己的解决方案，但是你的确需要去为你们公司建立一个设计字典。

 

磨刀不误砍柴工，我建议大家尽快去学习 两个方法论 (BEM, OOCSS）；

 

私心偏爱BEM 的命名体系和 定制的工作流。你可以在这里 Brainly.com 设计指南 找到一些思路帮你构建这个解决方案

 

如果不知道从哪开始构建你的标定方法论，那就看这里HTML5 Boilerplate

 

测试框架(jasmine, karma, mocha, tape, intern) 每个人都值得拥有

 

代码质量审查工具 (eslint, husky, editorconfig).你估计也不想让你的代码乱作一团吧？

 

一些可以帮助到你的社区(chats, IRC, meetups, twitter)

 

你不是一个人在战斗。

 

接下来——

 

在你开始挑选你的工具并交付你的问题解决方案的时候，有些进阶的问题你要搞清楚，

 

你需要和其他同学一块完成这个项目吗？他们分别是干啥？ 你需要的是什么？

 

这个问题的答案，将帮助你选择工具语言和工作流，这于你于公司都是有益的。

 

我平时工作中注重的是什么？ 代码质量？开发速度？还是可维护性？

 

这样你就可以明白是否 选用这个工具

 

我实在处理为核心问题服务吗？

 

如果是，那么保险起见，就用稳定的技术和框架吧

 

我需要把我的代码用于第三方吗？

 

这将缩小你选择技术范围

 

这是一个偏交互的app还是更多的是静态的文档

 

这将决定你需要 一个 html+css+tools还是静态网站脚手架或者就是一个CMS

 

它是一个项目还是一个群族项目

 

如果你有一群项目，那就需要组件化并且订立规范，最好是以静态文档的形式写下来。

 

这也为了减少代码过渡重复和稳定统一，同时，也可以把seo及服务端考虑进来