• 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)