From 27dbf0bc1014b7fa268180416161378f79022851 Mon Sep 17 00:00:00 2001
From: kmdjs <kmdjs@qq.com>
Date: Wed, 8 Feb 2017 12:53:55 +0800
Subject: [PATCH] update docs

---
 docs/cn_pr_env.md | 69 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 64 insertions(+), 5 deletions(-)

diff --git a/docs/cn_pr_env.md b/docs/cn_pr_env.md
index 0eba550c4..04047a085 100644
--- a/docs/cn_pr_env.md
+++ b/docs/cn_pr_env.md
@@ -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浏览器，也可集成到CI（Continuous 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设置成了umd，webpack会帮助我们build出umd的Omi。
+
+如果是打包demo（npm 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)
+