gulp karma webpack babel jasmine 前端单元测试工作流框架-唐霜

我在写componer的最后一关，就是实【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。现单元测试的部分，前端的单元测试其实比较【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。难，因为前端和服务端的代码不一样，无法做【原创不易，请尊重版权】【本文受版权保护】到细节的监控，前端的测试大多从用户如何如原创内容，盗版必究。【本文受版权保护】何操作，应该收到什么什么效果出发去写，所【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。以往往会出现一些意想不到的测试上的问题。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

吐槽的差不多，接下来就详细的介绍一下使用【版权所有，侵权必究】转载请注明出处：www.tangshuang.netgulp作为工作流控制工具，利用karm【版权所有，侵权必究】【未经授权禁止转载】a作为测试执行过程管理工具（Test R本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】unner），webpack作为解析器打著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】包源码和测试代码，jasmine作为测试原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。框架的一个构建。babel作为webpa原创内容，盗版必究。【本文首发于唐霜的博客】ck的一个加载器，解析我们源码中的ES6【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。代码。

【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

本文所有的讲解，都可以参考我写的【原创不易，请尊重版权】example【未经授权禁止转载】，边看代码边阅读更有助于理解。【未经授权禁止转载】

在gulp中使用karma本文作者：唐霜，转载请注明出处。

【本文受版权保护】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【作者：唐霜】

假设你已经比较了解gulp了，（如果你不【转载请注明来源】【原创内容，转载请注明出处】是很了解，可以点击我博客上方导航栏里面的【本文首发于唐霜的博客】【原创内容，转载请注明出处】“书”栏目，进入《gulp中文文档【版权所有，侵权必究】》进行学习。）gulp说到底，是一个工作【本文首发于唐霜的博客】【原创不易，请尊重版权】流控制工具，所谓工作流，就是说你在写代码【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。的时候，代码的创建、编译、测试等这些过程本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】可以通过gulp来进行控制。简单的例子就【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。是你自己编写好build的控制代码，然后本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】执行gulp build，就可以完成所有的编译，而不需要自己手动本文作者：唐霜，转载请注明出处。【本文受版权保护】去用命令行执行babel、webpack【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net等命令。从我刚入门的角度来看，可以把gu著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】lp当做一个触发器，执行gulp命令，g原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ulp又去执行其他的任务，相当于不用自己本文版权归作者所有，未经授权不得转载。【作者：唐霜】亲自执行各种复杂的任务组合。

既然理解为触发器，那么在gulp中使用k【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。arma就很好理解，相当于gulp触发k【转载请注明来源】【本文受版权保护】arma，后面的事都是karma去做。所著作权归作者所有，禁止商业用途转载。【转载请注明来源】以我们要先编写好karma的配置，然后在原创内容，盗版必究。【本文受版权保护】gulpfile的体系中编写好触发kar【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ma的代码，这样执行gulp即可自动触发【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。执行karma的测试动作。

【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

import {server as karma} from "gulp-karma-runner"
gulp.task("test", () => {
  gulp.src("test/specs/**/*.js")
    .pipe(karma({
      // config of karma
  }))
  .on("end", () => console.log("Done!"))})

上面借助了gulp-karma-runn【本文首发于唐霜的博客】【本文受版权保护】er这个插件。karma的官方是说，在g未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netulp中根本不需要借助插件，因为在gul转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】p中使用karma超级简单，只需要new著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】一个就可以，具体可以去karma的git转载请注明出处：www.tangshuang.net【未经授权禁止转载】hub上看他的例子。但我为了统一在gul【作者：唐霜】【转载请注明来源】p中使用src的方式，所以用了上面这种方未经授权，禁止复制转载。未经授权，禁止复制转载。法。而且gulp-karma-runne转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】r还有一个好处，是可以自己手动去配置ka【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。rma的参数，而不像karma常用的方法【版权所有】唐霜 www.tangshuang.net【本文受版权保护】写一个config文件。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

karma中使用jasmine【本文首发于唐霜的博客】

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。

karma在执行测试的时候，会自己创建一转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。个html去跑一遍，然后监控这个html【转载请注明来源】著作权归作者所有，禁止商业用途转载。中jasmine框架给出的测试结果，得到【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net这些结果之后就得到了测试的结果。但是在创【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。建这个html的时候是怎样的呢？你怎么知【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。道会不会跑一遍我要测试的代码呢？

这个你可能得去看下jasmine的文档。【作者：唐霜】本文版权归作者所有，未经授权不得转载。简单的说，就是你得在你的html中先引入【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netjasmine框架，就像引入jquery【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。或angular一样，然后再引入你要测试【未经授权禁止转载】本文作者：唐霜，转载请注明出处。的代码，最后再引入你的测试代码，也就是按【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。照jasmine的describe/it【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net的语法撰写的代码。

【作者：唐霜】著作权归作者所有，禁止商业用途转载。【作者：唐霜】未经授权，禁止复制转载。

jasmine即使不在karma中也可以【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】自己跑，你自己去看jasmine官网的例本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。子。现在的问题是，karma中jasmi未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ne是怎么用的？前面已经提到了，karm未经授权，禁止复制转载。【版权所有，侵权必究】a会自己创建一个临时的html文档，并且未经授权，禁止复制转载。【原创内容，转载请注明出处】调用浏览器去打开这个html（如果给了启【未经授权禁止转载】【转载请注明来源】动器的话，没有给启动器的情况下，karm【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。a会给你一个地址，让你自己去打开这个地址【作者：唐霜】本文版权归作者所有，未经授权不得转载。，也可以看到这个html，通过F12调试【版权所有，侵权必究】【本文首发于唐霜的博客】模式也可以看到测试结果），执行完之后，把【转载请注明来源】原创内容，盗版必究。所有的测试结果收集起来。其实karma到【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】这里就结束了自己的工作，但是我们希望得到【本文首发于唐霜的博客】【作者：唐霜】更多东西，所以会给karma装一堆插件，【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】这样可以让karma自动打开浏览器进行测【未经授权禁止转载】本文作者：唐霜，转载请注明出处。试，收集测试以后创建报告，甚至可以通过一【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net些插件控制测试代码，比如后面我们要讲的利著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】用webpack来打包测试代码。

【转载请注明来源】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

所以karma中使用jasmine其实超著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。级简单，首先是安装一个karma-jas本文作者：唐霜，转载请注明出处。【作者：唐霜】mine插件，然后在karma的配置中加转载请注明出处：www.tangshuang.net【版权所有，侵权必究】载这个插件，并且使用jasmine作为测【本文受版权保护】【关注微信公众号：wwwtangshuangnet】试框架。这样配置好之后，在karma创建原创内容，盗版必究。本文作者：唐霜，转载请注明出处。的临时测试html文档中，就会自动安排好本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。jasmine框架的引入。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【本文受版权保护】著作权归作者所有，禁止商业用途转载。

说到这里，其实karma跟gulp是有一原创内容，盗版必究。【原创内容，转载请注明出处】点像的，gulp是控制任意的工作流，没有原创内容，盗版必究。未经授权，禁止复制转载。任何自己的东西输出，而karma是控制测【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。试的工作流，输出一个临时的html，当然【原创内容，转载请注明出处】【未经授权禁止转载】，除了这个html，还有背后的serve未经授权，禁止复制转载。【版权所有，侵权必究】r，因为它要收集测试结果，所以这个ser【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netver就在后台接收这些结果，临时保存起来原创内容，盗版必究。本文作者：唐霜，转载请注明出处。，方便插件获取这些结果。但是其实没有ka【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。rma也可以完成测试，只是不够方便。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【原创不易，请尊重版权】【原创内容，转载请注明出处】

来看下karma中怎么去配置jasmin【未经授权禁止转载】本文作者：唐霜，转载请注明出处。e的东西，这里也有例子原创内容，盗版必究。：【原创不易，请尊重版权】

{
  frameworks: ["jasmine"],
  plugins: [
    require("karma-jasmine"),
  ],
}

在karma的配置中，就这里两个配置就可【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net以使用jasmine了，你可以试试使用k转载请注明出处：www.tangshuang.net【未经授权禁止转载】arma的debug，看看它的临时htm未经授权，禁止复制转载。原创内容，盗版必究。l中是不是已经把jasmine引入进来了原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】。

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

karma中使用webpack【本文受版权保护】

转载请注明出处：www.tangshuang.net【转载请注明来源】【原创内容，转载请注明出处】【原创内容，转载请注明出处】【作者：唐霜】

webpack又是一个重量级的家伙，它是【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】一个打包工具，所以现在被捧的火热，已经超【本文受版权保护】【本文首发于唐霜的博客】越了打包的范畴，也是个工作流的东西，甚至未经授权，禁止复制转载。原创内容，盗版必究。有人要用webpack代替gulp，但我著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。觉得一个东西坚持自己的核心功能，才能走的【作者：唐霜】本文版权归作者所有，未经授权不得转载。更远，火两年就死掉的工具或框架也不计其数【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】。

现在的问题是，为什么要在karma里面使转载请注明出处：www.tangshuang.net原创内容，盗版必究。用webpack打包？因为我们大部分情况【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net下，都是使用模块化的方式写的源码，源码中【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。有大量require的东西，直接在浏览器转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】下没法用。webpack的工作，就是将这转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】些require来require去的各个【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。模块打包为一个文件，并且提供内置的req本文作者：唐霜，转载请注明出处。原创内容，盗版必究。uire替代方法，这样在这个文件内部就可本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】以实现模块化类似的require方法，但【作者：唐霜】本文作者：唐霜，转载请注明出处。同时也可以在浏览器下运行。webpack【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。最大的好处，就是你的源码完全按照模块化编转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】程，require随便用，当然在ES6语原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】法中并没有require。

webpack的特点就是输出一个js文件【原创不易，请尊重版权】【本文受版权保护】，把所有的资源都囊括在这个js里面，包括【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netcss甚至图片。按理来说，我们在karm【原创不易，请尊重版权】未经授权，禁止复制转载。a的临时html里面，可以用webpac【原创内容，转载请注明出处】【原创不易，请尊重版权】k把源码打个包作为一个文件，然后把tes【转载请注明来源】本文作者：唐霜，转载请注明出处。t源码打个包作为测试文件，这样可以分开，本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。但是karma中使用webpack是以插转载请注明出处：www.tangshuang.net【本文受版权保护】件的形式，所以进入webpack进行打包【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。的文件就是karma里面配置的入口文件，【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。所以这会导致webpack会把所有kar【转载请注明来源】【原创不易，请尊重版权】ma的入口文件打包成为一个文件。这也就是【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。为什么我的example里面，karma原创内容，盗版必究。原创内容，盗版必究。的入口文件只有test/specs/**【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。/*.js，因为我只需要在这些test文【转载请注明来源】【本文受版权保护】件里面require源码和依赖包，所有的【本文首发于唐霜的博客】【转载请注明来源】东西都会在这个打包出来的js文件里面。所未经授权，禁止复制转载。【作者：唐霜】以，这反而让事情变得简单了，不需要我们去转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】考虑哪些文件是不是要引入之类的问题。直接原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】在你的测试文件里面写require就可以【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。了，看下例子原创内容，盗版必究。吧。【转载请注明来源】

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

karma中关于webpack的配置项多著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。了几个，具体看这里【作者：唐霜】：【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。【转载请注明来源】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

{
  preprocessors: {
    "test/speces/**/*.js": ["webpack"],
  },
  webpack: {
    // webpack config
  },
  plugins: [
    require("karma-webpack"),
  ],
}

preprocessors这个选项是告诉【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】karma，在你输出临时html之前，应本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】该进行一些什么样的处理。这里就是告诉ka【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。rma，你应该事先用webpack去对&原创内容，盗版必究。【原创内容，转载请注明出处】#8221;test/sepeces/*【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。*/*.js”这些文件进行打本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。包。但是有一个小问题，就是打包后会把这个【本文首发于唐霜的博客】【原创不易，请尊重版权】打包好的js文件引入到临时html中，可【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。是文件名是什么呢？其实，这个文件名，要在著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。webpack的配置文件中规定。我的example未经授权，禁止复制转载。中你可以看到我没有给一个output的f本文版权归作者所有，未经授权不得转载。【作者：唐霜】ilename，那么webpack会把原【本文受版权保护】【关注微信公众号：wwwtangshuangnet】始文件的文件名当做输出的文件的文件名。你未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。也可以自己规定这个文件名，但是你得更多了【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net解webpack的配置。

等一下，你说我是不是把gulp忘得一干二转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。净了。没错，当你在进入到测试这个层面的时【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。候，gulp触发完karma就没它什么事【作者：唐霜】原创内容，盗版必究。了。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【未经授权禁止转载】【原创不易，请尊重版权】

在webpack中使用babel编译ES未经授权，禁止复制转载。【转载请注明来源】6代码

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】

现在而言，还没有哪一个环境默认原生支持全转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。部的ES6语法，所以大部分时候，我们都用【作者：唐霜】转载请注明出处：www.tangshuang.netbabel进行编译，其实也就是把ES6转著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net化为ES5。但babel也有一些语法暂不【本文受版权保护】【本文首发于唐霜的博客】能支持，而且转码为ES5后，跟ES6的原转载请注明出处：www.tangshuang.net【本文受版权保护】理就完全不同了，特别是import，ex【版权所有】唐霜 www.tangshuang.net【作者：唐霜】port的模块化问题上。但是对于我们而言【作者：唐霜】转载请注明出处：www.tangshuang.net，目前还没有别的办法。

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。【本文受版权保护】

前面我们说webpack是可以解决req【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。uire的模块化问题，但是我们要用ES6【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】中的好用的语法糖，比如箭头函数，比如Ar未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ray.isArray()，就需要bab【本文首发于唐霜的博客】【原创不易，请尊重版权】el编译后再执行。

【原创内容，转载请注明出处】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原创内容，盗版必究。

对于熟悉webpack的同学而言，非常了著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。解webpack配置中module.lo未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。aders这个选项的作用。我们先看下如何著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。配置babel到webpack中。

首先，你需要安装babel-loader本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。:

原创内容，盗版必究。原创内容，盗版必究。【本文受版权保护】【转载请注明来源】未经授权，禁止复制转载。

npm install --save-dev babel-loader

说到这里，前面也忘记说了，所有的gulp【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】，karma的插件，也是要这样安装好，除【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】非有提到说这个插件是自带的，不然都要通过【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】npm进行安装。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

{
  module: {
    loaders: [
      {test: /\.js$/,loader: "babel?presets[]=latest"}
    ]
  }
}

这样当webpack在打包时，发现要打包【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】的文件（包括require的文件）是.j本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】s的话，就会调用babel，让babel【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。编译完文件之后，再作为普通文件对待进行下【本文受版权保护】本文版权归作者所有，未经授权不得转载。一步打包动作。

【作者：唐霜】【转载请注明来源】【本文首发于唐霜的博客】

karma中使用webpack时获取源码本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net的覆盖率

用webpack在测试中有一个问题，就是【本文首发于唐霜的博客】【版权所有，侵权必究】测试的时候只能测试到webpack打包完【转载请注明来源】著作权归作者所有，禁止商业用途转载。以后的文件，如果要查覆盖率的话就很麻烦，【作者：唐霜】本文作者：唐霜，转载请注明出处。因为我们测试的时候根本没有覆盖带源码，而【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】是覆盖的打包完的代码，不科学啊。

我们其实是希望覆盖率报告中告诉我们源码里转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。面哪些是已经被覆盖到的，而不是打包完以后未经授权，禁止复制转载。【原创内容，转载请注明出处】哪些被覆盖到了。打包完以后的覆盖率没意义著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】啊，webpack还过了一层babel，【转载请注明来源】未经授权，禁止复制转载。代码跟源码完全是两回事。因此，我们必须想【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。办法把源码的覆盖率搞出来。但是问题就非常【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。明显了，karma的临时html中只有w原创内容，盗版必究。【本文受版权保护】ebpack打包完的那个js，怎么才能覆【转载请注明来源】原创内容，盗版必究。盖原始文件呢？况且，我们的原始文件，还是本文作者：唐霜，转载请注明出处。原创内容，盗版必究。用ES6写的模块化文件，没法在浏览器里面【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net执行啊。其实只需要一个插件就可以解决。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

在webpack中，使用一个叫ispar【原创不易，请尊重版权】【未经授权禁止转载】ta-loader的插件，就可以让kar本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ma记住webpack打包时每个文件对应转载请注明出处：www.tangshuang.net【本文受版权保护】的代码，从而让测试代码与源码可以一一对应【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。，最终的效果就是，在覆盖率报告中，可以看未经授权，禁止复制转载。【原创不易，请尊重版权】到源码的覆盖率。

在webpack的配置中加入如下配置，具【转载请注明来源】转载请注明出处：www.tangshuang.net体看这里转载请注明出处：www.tangshuang.net：【本文受版权保护】

【作者：唐霜】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

{
  module: {
    preLoaders: [
      {test: /.js$/, loader: "isparta", exclude:/node_modules|bower_components/}
    ]
  }
}

上面已经用过一次module了，这次是在【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。module中加一个preLoaders本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，这个选项的作用是在所有的loeader转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net执行之前，执行这里面包含的loader，原创内容，盗版必究。【本文受版权保护】所以在babel执行之前，isparta【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。会执行，这样webpack打包时，源码与本文版权归作者所有，未经授权不得转载。【本文受版权保护】最终的打包结果代码之间的对应关系就可以非【作者：唐霜】未经授权，禁止复制转载。常好的对应，覆盖率就可以被查到。

小结【作者：唐霜】

所谓实践出真知，如果你连我给的本文作者：唐霜，转载请注明出处。example【访问 www.tangshuang.net 获取更多精彩内容】都懒得去看，去尝试，那么可能在理解上无法【原创内容，转载请注明出处】【原创不易，请尊重版权】真正掌握自己需要的东西。

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

gulp karma webpack都是著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。工具，他们的作用从简单的角度看，就是一类原创内容，盗版必究。【原创不易，请尊重版权】带特殊功能的触发器，通过插件的形式补充新【作者：唐霜】本文作者：唐霜，转载请注明出处。功能，触发其他工具工作。当然，webpa【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ck本身的打包功能还是比较复杂，不能把它【转载请注明来源】本文作者：唐霜，转载请注明出处。当触发器来对待，但是它内部确实需要触发b【版权所有，侵权必究】【作者：唐霜】abel的转码动作。

一旦理解了他们之间的关系，你要做的，就是本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。去熟悉每一个工具各自的配置、如何写代码来本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】使用，如此，你就可以更加灵活的选择，甚至【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net了解了这个背后的机制之后，可以加入更多的【转载请注明来源】转载请注明出处：www.tangshuang.net工具进来，给自己开发一个方便自己工作的工【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】作流管理工具，我也正是这样探索，才开发出【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net了componer【访问 www.tangshuang.net 获取更多精彩内容】，这个以开发components为目标的【版权所有】唐霜 www.tangshuang.net【作者：唐霜】工具。

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【原创内容，转载请注明出处】【原创不易，请尊重版权】【原创不易，请尊重版权】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文受版权保护】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【本文受版权保护】【本文受版权保护】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【转载请注明来源】【版权所有，侵权必究】未经授权，禁止复制转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【转载请注明来源】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【原创不易，请尊重版权】

2016-12-17 7069 babel, gulp, jasmine, karma, webpack

唐霜

gulp karma webpack babel jasmine 前端单元测试工作流框架