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)