webpack使用小记

如果前两年大家还在讨论grunt和gulp等构建工具的话,现在无疑是webapck的时代。严格来讲,webpack其实和grunt/gulp根本不是一种东西,它不是一个构建工具,而是module bundler。简单来说,webpack将JS、CSS、HTML(包含各种预处理器)以及图片等等都视为“资源”,每个资源文件都是一个module文件,而module文件之间存在依赖,webpack就是根据module文件间的依赖将所有module打包(bundle)起来。而回忆我们用grunt/gulp构建项目时,做的很大一部分工作也无非是将JS、CSS、HTML编译合并压缩等等,所以从这个层面上讲用webpack和grunt/gulp得到的结果是一样的。但webpack好就好在使用loader的概念让配置更加容易,再也不用和一堆文件路径打交道了。这篇文章就讲一下自己在使用webpack时的一些实践。

阅读全文 »

用TravisCI来做持续集成

持续集成的好处自不用说,一个是省了手动build部署的繁琐,二是每一个提交都有自动跑测试保证质量。平时在公司Jenkins用的比较多,开源世界里同样也有能和Jenkins比肩的好工具:TravisCI。TravisCI可以和Github无缝集成,每次push都可以触发相应的操作,跑测试、自动部署都不在话下。这篇文章就记录一下我在angular1-webpack-starter项目上使用TravisCI的经验,最终实现的效果就是:提交一个commit后,自动跑单元测试,然后build项目,然后将测试覆盖率报告和站点部署到Github Pages上去,最后跑E2E测试。

阅读全文 »

Angular里的E2E测试

上一篇聊完了单元测试,这一篇来说说E2E测试。单元测试着眼的是“关注分离”,测的是一些函数单元是不是工作正常,而E2E则是集成测试,从最终用户的角度来进行端到端(End To End)的测试,测一些用户场景是不是正常。这篇文章就来探讨一下写E2E测试的最佳实践,本文使用protractor 2.x和jasmine 2.x,但一些思路和想法同样适用于别的框架。

阅读全文 »

谈谈单元测试中的关注分离

前端的单元测试越来越受到重视,网上也有很多讲解Angular中如何写好单元测试的文章,我自己在最近的angular1-webpack-starter项目中也写了很多单元测试。单元测试的一个核心理念就是对“单元”进行隔离,然后单独测试。可是网上的很多教程存在不少误区:比如在controller的测试中去使用$httpBackend,在引入第三方service的时候使用真实的service等等,说到底都是没有实现“关注分离”(Separation of Concerns),“单元”没有真正的被隔离。这篇文章就谈谈Angular的单元测试中如何更好的实现关注分离。

阅读全文 »

ES6与Angular 1.x

ES6出来也很长时间了,把ES6应用在Angular 1.x的文章也不少,有了class这个语法糖Angular里的很多东西都可以写的比较规范了,但很多文章非要把Angular里的所有概念都写成class,这我就觉得没啥必要了。这篇文章就谈谈我自己在ES6和Angular 1.x上的一些实践。

阅读全文 »