HTML5技术

Omi原理-环境搭建 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-02-08 15:01 我要评论( )

环境搭建 Omi框架使用 Webpack + ES6 的方式去开发;使用karma+jasmine来作为Omi的测试工具。 Karma介绍 Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integratio

环境搭建

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中,有如下配置:

  • ES6+相关依赖有babel-core、babel-loader和babel-preset-es2015
  • 在webpack.config.js中配置js文件使用babel-loader编译。

    loaders: [ ]

  • webpack相关依赖有node-libs-browser和webpack
  • 其余都是单元测试相关依赖

    注意,这里使用了karma-webpack。因为使用Omi框架支持ES6+和ES5,使用karma-webpack是为了在单元测试里面使用ES6+的import和Class等语法。
  • 在karma.conf.js中配置webpack:

    webpack: webpackConfig, webpackMiddlewareplugins: [ ]

    具体配置看test目录下的karma.conf.js和webpack.test.config.js便可。

    注意,karma.conf.js需要设置

    // if true, Karma captures browsers, runs the tests and exits singleRun

    不然,travis ci脚本执行的时候不会中断导致执行超时异常。

    npm 脚本

    其中:

    在webpack.config.js中,会根据 process.env.npm_lifecycle_event去设置不同的入口文件。所以同样是执行webpack -w,执行结果可以不一样。

    来看下build的相关webpack配置:

    if(ENV === 'build'){ config

    这里把libraryTarget设置成了umd,webpack会帮助我们build出umd的Omi。

    如果是打包demo(npm run hello 和 npm run todo)的话,会进入下面的条件判断:

    .ENV .ENV

    会去example下对应的目录查找main.js作为webpack入口文件。

    这里可以看到,我们不仅用webpack build出Omi框架,也使用webpack build所有demo。
    详细配置参考webpack.config.js的配置。

    参考文档 招募计划


    

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • ionic + cordova+angularJs 搭建的H5 App完整版总结 - 婷风

      ionic + cordova+angularJs 搭建的H5 App完整版总结 - 婷风

      2016-12-05 12:00

    • 超小Web手势库AlloyFinger原理 - 【当耐特】

      超小Web手势库AlloyFinger原理 - 【当耐特】

      2016-11-14 18:00

    • 使用专业的消息队列产品rabbitmq之centos7环境安装 - 一线码农

      使用专业的消息队列产品rabbitmq之centos7环境安装 - 一线码农

      2016-10-29 16:00

    • 浏览器内部工作原理 - wangwen896

      浏览器内部工作原理 - wangwen896

      2016-10-29 15:00

    网友点评
    h