首页 > 代码库 > web流行工具
web流行工具
中小型公司:
Node.js:现代工业化前端的基础;
RequireJS:AMD规范,
即将过时的 JavaScript 模块化方案;
Bower:前端模块源;
npm;前端工具源,另一个潜在的前端模块源;
Browserify:即将过时的基于 CommonJS 的前端模块化方案;
Less:等 CSS 增强工具;
Gulp:前端构建工具;
编辑器:
首推:VIM、Brackets
可选:atom、sublime、emacs
webstorm 那叫 IDE,不(仅仅)是编辑器
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交换数据,即使是首屏。
web流行工具