中小型公司:css
Node.js:现代工业化前端的基础;前端
RequireJS:AMD规范,node
即将过期的 JavaScript 模块化方案;react
Bower:前端模块源;webpack
npm;前端工具源,另外一个潜在的前端模块源;git
Browserify:即将过期的基于 CommonJS 的前端模块化方案;github
Less:等 CSS 加强工具;web
Gulp:前端构建工具;npm
编辑器:
首推:VIM、Brackets
可选:atom、sublime、emacs
webstorm 那叫 IDE,不(仅仅)是编辑器json
css工具:
苦于合做的同事一直选的是 bootstrap,我没有认真比较过 sass 与 less 而直接一路用着 less,不过二者其实差不了多少。
如今貌似流行后处理器了(前面说的两个叫预处理器,我也不知道他们差异在哪),autoprefixer 等,推荐看 Pleeease 这是一个这类工具的集合
模块化工具:
首推:browserify 代码架构清晰,你能够本身拔插其中的某些部分,好比替换个 prelude(在浏览器里怎么加载模块的代码,默认是每一个编译合并后的 js 都带一小段),或者用诸如 factor-bundle 这样的插件拎出共用组建来。由于架构清晰代码量小,你能够通读源码了解其原理。
其次:webpack,不得不说 webpack 很强大,若是要用 react 的话 react-hot-loader 这样的插件目前只此一家。对我来讲它的问题在于太庞大了,我没法理清其全貌怕用在项目里踩坑本身没法解决。
不推荐:require.js sea.js,两个都是要过期的东西,在我还没成为 sea.js 黑前,就是坚决的 require.js 黑了。二者的共同问题是要为每一个文件写首尾的 wrapper 在浏览器端去解决,而不是像前二者在开发部署阶段去处理,require.js 问题最大,好歹 sea.js 还和 node.js 有所兼容。
流程工具/部署前处理:
部署前处理主要包括用前面的模块化工具打包、生成版本号、压缩文件等。我主要用 gulp 来作这些事,历来都不会用也不喜欢 grunt,百度的 FIS 据说过但不了解,读过 @张云龙 的文章推测应该还不错。个人建议是@张云龙 的文章必读而 FIS 可参考,最后用 gulp 来组织本身的工做流。
若是你用熟了 gulp,你可能会厌倦开工一个项目就想切个页面也要摆好排场写个几十上百行的 gulpfile.js,这时你应该作减法,能够向 substack 学学用 npm run (package.json 里面的 scripts 属性)或者像 ./task.js 这样的几行代码便可。
包管理:
bower:用 github 来作源,国内使用很不堪,如 @yhben 的回复“100k的js,克隆了一个50M的项目”。它可能简化了一点点你去 github 上搜索代码下载保存的工做,但被要下载全库这个缺点抵消了,对于依赖管理,我以为他真没作多少事。
npm:我是不管前端后端甚至 css 都用 npm 的,公司里也用 @苏千 和 @死马 的 cnpm.org 搭了一个私有库在用,我的以为这个工具必定得掌握好,否则你就自绝于当今前端开发的主流了。
前端框架:分具体使用场景:(1)内部管理系统extjs、Angular、React etc.咱们鼓励在内部或者重要程度比较低的项目中,使用一些新的、热的或者前沿的技术;(2)移动Web,基础库zepto。PC Web,基础库jQuery;(3)小项目、活动页面,一般没有架构而言。大型项目,基本除了基础库,都会有个本身的业务框架;固然咱们也有有些公用组件的沉淀;(4)复杂的PC Web APP中,使用knockout作MVVM和knockout模块组织代码;knockout这东西好啊,大小合适,兼容性好,还支持组件化开发;质量保障:项目比较杂,暂时没有引入专业测试工具,主要是3点:(1)本身编写的小的测试模块,作成工做流中的一部分,构建时就能发现一些低级错误(相似JSLINT);(2)JS代码执行错误、AJAX质量、PVUV等的数据上报和统计;(3)运维侧的各类监控工具;先后端分离:God Bless,咱们大多数项目都是非展现型页面。对首页加载速度没有过多要求,因此咱们一般都是先后端彻底分离,即所有使用AJAX交换数据,即便是首屏。