Omi原理-环境搭建

时间 2019-11-09

标签 omi 原理环境搭建繁體版

原文原文链接

环境搭建

Omi框架使用 Webpack + ES6 的方式去开发；使用karma+jasmine来做为Omi的测试工具。html

Karma介绍

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试全部主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其余代码编辑器一块儿使用。这个测试工具的一个强大特性就是，它能够监控(Watch)文件的变化，而后自行执行。可是集成到travis ci要把singleRun设置成true,让其只执行一遍。node

Jasmine介绍

Jasmine 是一款 JavaScript BDD（行为驱动开发）测试框架，它不依赖于其余任何 JavaScript 组件。它有干净清晰的语法，让您能够很简单的写出测试代码。webpack

开发依赖包

在package.json中，有以下配置:git

"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-es2015github

在webpack.config.js中配置js文件使用babel-loader编译。web

loaders: [
    {
        loader: 'babel-loader',
        test: /\.js$/,
        query: {
            presets: 'es2015',
        }
    }
]

webpack相关依赖有node-libs-browser和webpackchrome

其他都是单元测试相关依赖npm

注意，这里使用了karma-webpack。由于使用Omi框架支持ES6+和ES5,使用karma-webpack是为了在单元测试里面使用ES6+的import和Class等语法。

在karma.conf.js中配置webpack:json

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的配置。

参考文档

招募计划

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)