Omi框架 使用 Webpack + ES6 的方式去开发;使用karma+jasmine来作为Omi的测试工具。
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行。但是集成到travis ci要把singleRun设置成true,让其只执行一遍。
Jasmine 是一款 JavaScript BDD(行为驱动开发)测试框架,它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法,让您可以很简单的写出测试代码。
在package.json中,有如下配置:
"devDependencies": { "babel-core": "^6.0.20", "babel-loader": "^6.0.1", "babel-preset-es2015": "^6.0.15", "node-libs-browser": "^0.5.3", "webpack": "^1.14.0", "jasmine-core": "^2.5.2", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-jasmine": "^1.1.0", "karma-webpack": "^1.8.1" }
在webpack.config.js中配置js文件使用babel-loader编译。
loaders: [ { loader: 'babel-loader', test: //.js$/, query: { presets: 'es2015', } } ]
其余都是单元测试相关依赖
注意,这里使用了karma-webpack。因为使用Omi框架支持ES6+和ES5,使用karma-webpack是为了在单元测试里面使用ES6+的import和Class等语法。
在karma.conf.js中配置webpack:
webpack: webpackConfig, webpackMiddleware:{ noInfo:false }, plugins: [ 'karma-webpack', 'karma-jasmine', 'karma-chrome-launcher' ]
具体配置看test目录下的 karma.conf.js 和 webpack.test.config.js 便可。
注意,karma.conf.js需要设置
// if true, Karma captures browsers, runs the tests and exits singleRun: true,
不然,travis ci脚本执行的时候不会中断导致执行超时异常。
"scripts": { "build": "webpack -w", "test": "karma start test/karma.conf.js", "hello": "webpack -w", "todo": "webpack -w" }
其中:
在webpack.config.js中,会根据 process.env.npm_lifecycle_event去设置不同的入口文件。所以同样是执行webpack -w,执行结果可以不一样。
来看下build的相关webpack配置:
if(ENV === 'build'){ config = { entry: { omi: './src/index.js' }, output: { path: 'dist/', library:'Omi', libraryTarget: 'umd', filename: '[name].js' },
这里把libraryTarget设置成了umd,webpack会帮助我们build出umd的Omi。
如果是打包demo(npm run hello 和 npm run todo)的话,会进入下面的条件判断:
else { config.entry = './example/' + ENV + '/main.js'; config.output.path = './example/' + ENV + '/'; }
会去example下对应的目录查找main.js作为webpack入口文件。
这里可以看到,我们不仅用webpack build出Omi框架,也使用webpack build所有demo。
详细配置参考 webpack.config.js 的配置。