原文链接：http://www.cnblogs.com/shuoer/p/7779131.html

用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程

首先解释下什么事systemJS、karma、Jasmine、babel

  • SystemJS是万能动态模块加载器github
  • Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。karma官网
  • Jasmine是单元测试框架,jasmine很有意思的提出了BDD(Behavior Driven Development)行为驱动开发,测试先行的概念jasmine官网
  • Babel 是一个 JavaScript 编译器。Babel 用于转化你的 JavaScript 代码babel官网

初始化一个工程

//创建一个工程目录并切换到该目录下

mkdir karmatest && cd karmatest

//初始化一个工程，得到package.json来管理我们项目中的包依赖

npm init

安装karma

//首先需要全局安装karma的命令行工具(已经有的略过)

npm install -g karma-cli

//安装karma到我当前项目中并添加到本地的依赖

npm install karma --save-dev

//初始化karma得到karma的配置文件karma.conf.js

karma init


先执行下karma start 看看karma安装成功了没？好像报错了！

从错误提示可以看出来karma 连接jasmine-core的时候报错了，缺少jasmine-core包！俩字，安装！

//安装jasmine-core并添加到本地的版本依赖中

npm install jasmine-core --save-dev

//安装成功之后我们再执行下karma start测试下karma是否安装成功

karma start


可以看出我们karma安装成功了，只是没有任何的测试用例，接下来我们配置下karma.conf.js和写下我们的测试用例

//修改karma.conf.js两处

//第一处告诉karma业务代码和测试代码在哪

files: [

        './src/utils/*.js',

        './test/**/*.spec.js'

    ]

//第二处把karma的持续集成模式打开，让karma去自动捕获浏览器测试结束和退出

singleRun: true

接下来我们创建src和test目录和编写业务代码和测试用例

//创建业务代码在src下的utils下创建index.js代码如下

function add(num){

    return ++num

}

//创建我们的测试用例test目录下编写测试用例test.spec.js代码如下

//此处测试用例是jasmine的语法请参阅jasmine的官网

//jasmine 官网https://jasmine.github.io/edge/introduction.html

describe('测试加法函数',function(){

    it('测试add(1)是否等于2',function(){

        expect(add(1)).toEqual(2);

    })

})

//保存好之后我们再次执行karma start

ok 到此处我们的单元测试已经做好了，我们编辑package.json让项目执行npm test就可以跑我们写好的测试用例

{

  "name": "karmatest",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "karma start"//此处支持npm test跑我们的karma start

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "jasmine-core": "^2.8.0",

    "karma": "^1.7.1",

    "karma-jasmine": "^1.1.0",

    "karma-phantomjs-launcher": "^1.0.4"

  }

}

配置systemJS+Babel动态引用并解析我们的es6代码

由于systemJS需要我们起一个server所以我们先装个server
server你可以随意起，能起来就行，此处我用的是serve

安装本地serve

//全局安装一个serve

npm install serve -g

//将serve安装进我们的项目中并添加进项目的版本依赖中

npm install serve --save-dev

//测试serve是否安装成功

serve


安装systemJS

//安装systemjs和systemjs-plugin-babel并添加进版本依赖中

npm install systemjs systemjs-plugin-babel --save-dev

在src目录下创建一个indexclass.js文件添加如下内容

/**

 * 引入我们单元测试创建的add方法

 */

import './utils/index.js'

/**

 * 创建一个person类

 */

class Person{

    /**

     * [constructor description]

     * @param  {[type]} name [名称]

     * @param  {Number} num  [调用次数]

     * @return {[type]}      [description]

     */

    constructor(name,num=0){

        this.name = name

        this.num = num

    }

    /**

     * [speak 该方法返回当前实例的名称和调用次数]

     * @return {[type]} [description]

     */

    speak(){

        this.num = add(this.num)

        return `我的名字叫${this.name}你调了我${this.num}次`

    }

}

/**

 * [create  用于创建person类的实例化]

 * @param  {[type]} name [description]

 * @return {[type]}      [description]

 */

export const create = (name,num)=>{

    let p = new Person(name,num)

    return p

}

在我们项目的根目录创建index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 首先把systemjs引进来 -->

    <script src="./node_modules/systemjs/dist/system.js"></script>

</head>

<body>

    <script>

        /**

         * [SystemJS.config  SystemJS的配置文件]

         * [baseURL ]

         * [map     ]

         * @type {String}

         */

        SystemJS.config({

            baseURL:'./',

            transpiler:'plugin-babel',

            map:{

                'plugin-babel':'node_modules/systemjs-plugin-babel/plugin-babel.js',

                'systemjs-babel-build':'node_modules/systemjs-plugin-babel/systemjs-babel-browser.js'

            }

        });

        /**

         * [用SystemJS去加载我们的es6模块文件]

         * @param  {[type]} compoent [description]

         * @return {[type]}          [description]

         */

        SystemJS.import('./src/indexclass.js').then(compoent=>{

            /**

             * [compoent component 是我们indexclass文件export的方法此处我们export了个create方法]

             * [create   次方法是一个类似的工厂函数，用于创建出一个一个的实例]

             * @type {[type]}

             */

            // 实例化一个zhangsan

            var zhangsan = compoent.create('zhangsan')

            // 实例化一个lisi

            var lisi = compoent.create('lisi')

            console.log(zhangsan.speak())

            console.log(zhangsan.speak())

            console.log(zhangsan.speak())

            console.log(lisi.speak())

        })

    </script>

</body>

</html>

ok 最后再配置下package.json文件支持npm start 启动服务
完整的package.json如下

{

  "name": "karmatest",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start":"serve",

    "test": "karma start"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "jasmine-core": "^2.8.0",

    "karma": "^1.7.1",

    "karma-jasmine": "^1.1.0",

    "karma-phantomjs-launcher": "^1.0.4",

    "serve": "^6.4.0",

    "systemjs": "^0.20.19",

    "systemjs-plugin-babel": "0.0.25"

  }

}

测试下我们的成果

//跑单元测试

npm test

//启动服务

npm start


【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程的更多相关文章

  1. Karma+Jasmine测试环境搭建

    1.如果你还没安装node的话,去这里下载:http://nodejs.cn/download/,选择跟你电脑匹配的并进行安装,一路next下来就行,路径最好改成自己让自己舒服的,默认的路径可能会很让 ...

  2. premake在Ubuntu和GCC环境下创建简单的C++工程

    由于premake基于lua脚本,为了方便编辑lua脚本,我在emacs24中利用package system安装了lua-mode. 然后创建config.lua文件,填入下面这段,主要来自:htt ...

  3. 学习Karma+Jasmine+istanbul+webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

  4. 使用karma+jasmine做单元测试

    目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...

  5. angular测试-Karma + Jasmine配置

    首先讲一下大致的流程: 需要node环境,首先先要安装node,node不会?请自行搜索.版本>0.8 安装node完成之后先要测试下npm是否测试通过,如下图所示 首先看下目录结构 目录为:F ...

  6. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  7. angularJS测试一 Karma Jasmine Mock

    AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...

  8. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  9. 搭建Karma+Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

随机推荐

  1. Servlet 笔记-Session 跟踪

    HTTP 是一种"无状态"协议,这意味着每次客户端检索网页时,客户端打开一个单独的连接到 Web 服务器,服务器会自动不保留之前客户端请求的任何记录. 但是仍然有以下三种方式来维持 ...

  2. call()与apply() 改变this指向

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } span.Apple-tab-span ...

  3. C++流类库(11)

    C++的流类库由几个进行I/O操作的基础类和几个支持特定种类的源和目标的I/O操作的类组成. 流类库的基础类 ios类是isrream类和ostream类的虚基类,用来提供对流进行格式化I/O操作和错 ...

  4. LeetCode 1. Two Sum （两数之和）

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  5. js判断值为null

    今天在做项目的时候,犯了一个着实不应该的错误,拿到data为null,然后判断如果为null执行A,否则执行B 我错误的代码是 if(data===null){ A; }else{ B; } 怎么调试 ...

  6. 用正则表达式（regex）匹配多项式（polynomial）

    因为作业的要求,我需要识别用户从命令行输入的多项式,并且要提取出其中的系数.指数以便用于后续计算. 曾经想过用一个数组把用户所有的输入全部存进来,然后在写逻辑判断.但想想那复杂的逻辑,头皮都发麻,这时 ...

  7. display:none，float小秘密

    一个元素不管是块元素还是行内元素   在添加了 display:none 之后,就变成了不可见的块元素,可以给他添加长度和高度   在float之后内联元素也会隐性成为  inline-block   ...

  8. ligerUI---ligerGrid中treegrid(表格树)的使用

    写在前面: 表格树是在普通ligerGrid的基础上,做了一点改变,使数据以表格树的形式显示出来,适用于有级别的数据比如菜单(有父菜单,父菜单下面有子菜单).表格树的显示有两种方法,可以根据自己的项目 ...

  9. JavaSE高级1

    内部类 内部类概念: 所谓内部类(Inner Class),顾名思义,就是将一个类定义在另一个类的内部.内部的类称之为内部类. 内部类的主要特点: 内部类可以很好的实现隐藏,可以使用protected ...

  10. 基于HTML5 Canvas的CSG构造实体几何书架

    CSG 构造实体几何这个概念在工业水利水电施工上.游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体.圆柱体.棱柱.棱锥.球体.圆锥等.根据每个软件包的不同这些体元也有 ...