環境搭建
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)
