【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程
原文链接：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工程的更多相关文章
- Karma+Jasmine测试环境搭建
1.如果你还没安装node的话,去这里下载:http://nodejs.cn/download/,选择跟你电脑匹配的并进行安装,一路next下来就行,路径最好改成自己让自己舒服的,默认的路径可能会很让 ...
- premake在Ubuntu和GCC环境下创建简单的C++工程
由于premake基于lua脚本,为了方便编辑lua脚本,我在emacs24中利用package system安装了lua-mode. 然后创建config.lua文件,填入下面这段,主要来自:htt ...
- 学习Karma+Jasmine+istanbul+webpack自动化单元测试
学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma? Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...
- 使用karma+jasmine做单元测试
目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...
- angular测试-Karma + Jasmine配置
首先讲一下大致的流程: 需要node环境,首先先要安装node,node不会?请自行搜索.版本>0.8 安装node完成之后先要测试下npm是否测试通过,如下图所示 首先看下目录结构 目录为:F ...
- Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告
1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...
- angularJS测试一 Karma Jasmine Mock
AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...
- 在WebStorm中集成Karma+jasmine进行前端单元测试
在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...
- 搭建Karma+Jasmine的自动化单元测试
最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...
随机推荐
- svn 提交 working copy is not up-to-date
svn在提交时报错信息如下: working copy is not up-to-date svn:commit failed(details follow): svn:file "xxxx ...
- 关于IntelliJ IDEA删除项目
刚开始使用IDEA . 自己创建项目玩,结果发现IDEA无法删除,我也是醉了,Eclipse直接右键 -> delete -> 勾选删除源文件 就删除了,IDEA死活没有找到删除选项... ...
- RabbitMQ-Windows单机集群搭建
1.先安装Erlang http://www.erlang.org/downloads,安装完成后,设置环境变量: 变量名:ERLANG_HOME 变量值:D:\Program Files\erl9. ...
- Ajax通过FormData上传文件
1.使用<form>表单初始化FormData对象方式上传文件 HTML代码 <form id="uploadForm" enctype="multip ...
- hive中UDF、UDAF和UDTF使用
Hive进行UDF开发十分简单,此处所说UDF为Temporary的function,所以需要hive版本在0.4.0以上才可以. 一.背景:Hive是基于Hadoop中的MapReduce,提供HQ ...
- robotframework2.8.7日志输出List乱码
今天在完善robotframework的数据分离的时候,需要读取list中的中文信息,在日志输出中,英文显示是正常的:但是中文就出现所谓的乱码情况,如截图所示 对于list中的信息,日志显示乱码:查找 ...
- Node.js CVE-2017-1484复现（详细步骤）
0x00 前言 早上看Sec-news安全文摘的时候,发现腾讯安全应急响应中心发表了一篇文章,Node.js CVE-2017-14849 漏洞分析(https://security.tencent. ...
- mybatis映射异常
今天写项目突然遇到了这么个问题: nested exception is org.apache.ibatis.reflection.ReflectionException: There is no ...
- SpringMVC知识一锅烩
Spring简介 SpringMVC和Struts2一样都是属于表现层的框架,将前段发出的请求分发给对应的后端处理器即Controller 处理流程 用户请求被前端控制前拦截,然后根据对应的拦截路径去 ...
- Hadoop 2.2.0单节点的伪分布集成环境搭建
Hadoop版本发展历史 第一代Hadoop被称为Hadoop 1.0 1)0.20.x 2)0.21.x 3)0.22.x 第二代Hadoop被称为Hadoop 2.0(HDFS Federatio ...