update docs

This commit is contained in:
kmdjs 2017-02-08 12:53:55 +08:00
parent 3f02e72103
commit 27dbf0bc10
1 changed files with 64 additions and 5 deletions

View File

@ -1,6 +1,13 @@
<h2 id="环境搭建">环境搭建</h2>
我们使用 Webpack + ES6 的方式去开发Omi框架使用karma+jasmine来作为Omi的测试工具。
[Omi框架](https://github.com/AlloyTeam/omi)使用 Webpack + ES6 的方式去开发使用karma+jasmine来作为Omi的测试工具。
## Karma介绍
Karma是一个基于Node.js的JavaScript测试执行过程管理工具Test Runner。该工具可用于测试所有主流Web浏览器也可集成到CIContinuous integration工具也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是它可以监控(Watch)文件的变化然后自行执行。但是集成到travis ci要把singleRun设置成true,让其只执行一遍。
## Jasmine介绍
Jasmine 是一款 JavaScript BDD行为驱动开发测试框架它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法,让您可以很简单的写出测试代码。
## 开发依赖包
@ -22,10 +29,24 @@
```
* ES6+相关依赖有babel-core、babel-loader和babel-preset-es2015
在webpack.config.js中配置js文件使用babel-loader编译。
```js
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
query: {
presets: 'es2015',
}
}
]
```
* webpack相关依赖有node-libs-browser和webpack
* 其余都是单元测试相关依赖
注意这里使用了karma-webpack。因为使用Omi框架支持ES6+和ES5,使用karma-webpack是为了在单元测试里面使用ES6+的import和Class等语法。
注意这里使用了karma-webpack。因为使用Omi框架支持ES6+和ES5,使用karma-webpack是为了在单元测试里面使用ES6+的import和Class等语法。
在karma.conf.js中配置webpack:
@ -41,7 +62,7 @@
]
```
具体配置看test目录下的karma.conf.js和webpack.test.config.js便可。
具体配置看test目录下的[karma.conf.js](https://github.com/AlloyTeam/omi/blob/master/test/karma.conf.js)[webpack.test.config.js](https://github.com/AlloyTeam/omi/blob/master/test/webpack.test.config.js)便可。
注意karma.conf.js需要设置
@ -50,9 +71,9 @@
singleRun: true,
```
不然travis ci脚本执行的时候不会中断导致执行异常。
不然travis ci脚本执行的时候不会中断导致执行超时异常。
### npm 脚本
## npm 脚本
```js
"scripts": {
@ -71,3 +92,41 @@ singleRun: true,
在webpack.config.js中会根据 process.env.npm_lifecycle_event去设置不同的入口文件。所以同样是执行webpack -w执行结果可以不一样。
来看下build的相关webpack配置:
```js
if(ENV === 'build'){
config = {
entry: {
omi: './src/index.js'
},
output: {
path: 'dist/',
library:'Omi',
libraryTarget: 'umd',
filename: '[name].js'
},
```
这里把libraryTarget设置成了umdwebpack会帮助我们build出umd的Omi。
如果是打包demonpm run hello 和 npm run todo的话会进入下面的条件判断
```js
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](https://github.com/AlloyTeam/omi/blob/master/webpack.config.js)的配置。
## 参考文档
* [http://www.cnblogs.com/cqhaibin/p/5867125.html](http://www.cnblogs.com/cqhaibin/p/5867125.html)
* [https://karma-runner.github.io/latest/intro/installation.html](https://karma-runner.github.io/latest/intro/installation.html)
* [https://karma-runner.github.io/latest/intro/configuration.html](https://karma-runner.github.io/latest/intro/configuration.html)