Omi原理-環境搭建

環境搭建

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 組件。它有乾淨清晰的語法，讓您能夠很簡單的寫出測試代碼。

開發依賴包

在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"
  }

• ES6+相關依賴有babel-core、babel-loader和babel-preset-es2015

在webpack.config.js中配置js文件使用babel-loader編譯。

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.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腳本執行的時候不會中斷致使執行超時異常。

npm 腳本

"scripts": {
    "build": "webpack -w",
    "test": "karma start test/karma.conf.js",
    "hello": "webpack -w",
    "todo": "webpack -w"
  }

其中：

• npm run build : 生成dist目錄的omi.js文件
• npm run test : 執行單元測試
• npm run hello : 編譯hello的demo
• npm run todo : 編譯todo的demo

在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的配置。

參考文檔

• http://www.cnblogs.com/cqhaibin/p/5867125.html
• https://karma-runner.github.io/latest/intro/installation.html
• https://karma-runner.github.io/latest/intro/configuration.html

招募計劃

• Omi的Github地址https://github.com/AlloyTeam/omi
• 若是想體驗一下Omi框架，請點擊Omi Playground
• 若是想使用Omi框架，請閱讀 Omi使用文檔
• 若是想一塊兒開發完善Omi框架，有更好的解決方案或者思路，請閱讀 從零一步步打造web組件化框架Omi
• 關於上面的兩類文檔，若是你想得到更佳的閱讀體驗，能夠訪問Docs Website
• 若是你懶得搭建項目腳手架，能夠試試Scaffolding for Omi，npm安裝omis即可
• 若是你有Omi相關的問題能夠New issue
• 若是想更加方便的交流關於Omi的一切能夠加入QQ的Omi交流羣(256426170)