转载

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)

Omi原理-环境搭建

原文 http://www.cnblogs.com/iamzhanglei/p/6377677.html

正文到此结束

所属分类：编程技术

本文标签： web 代码 dist plugin java js GitHub build JavaScript 目录 https Node.js example 2015 git 管理开发 http ip UI dependencies DDL node 配置 Chrome core 测试安装 json src id 编译 tar HTML lib IO
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Omi原理-环境搭建

环境搭建

Karma介绍

Jasmine介绍

开发依赖包

npm 脚本

参考文档

招募计划

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流