Omi原理-环境搭建

tommego 发布于2019-08-05 17:53 / 1135人阅读

摘要：相关依赖有和其余都是单元测试相关依赖注意，这里使用了。因为使用框架支持和使用是为了在单元测试里面使用的和等语法。脚本其中生成目录的文件执行单元测试编译的编译的在中，会根据去设置不同的入口文件。

环境搭建

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 vps搭建ss原理服务器搭建工作原理加速器服务器搭建原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60103.html

Omi原理-环境搭建

摘要：相关依赖有和其余都是单元测试相关依赖注意，这里使用了。因为使用框架支持和使用是为了在单元测试里面使用的和等语法。脚本其中生成目录的文件执行单元测试编译的编译的在中，会根据去设置不同的入口文件。环境搭建 Omi框架使用 Webpack + ES6 的方式去开发；使用karma+jasmine来作为Omi的测试工具。 Karma介绍 Karma是一个基于Node.js的JavaScrip...

lncwwn 2019-08-20 14:12 评论0 收藏0
Omi原理-Hello Omi

摘要：注意，这里目前没有引入，不管第几次渲染都是无脑设置，复杂结构对浏览器的开销很大，这里后续会引入。整合这里把给直接暴露在下，因为每个组件都生成了唯一的，后续实现事件作用域以及对象实例获取都要通过下的获取。 Hello Omi Omi框架的每个组件都继承自Omi.Component，本篇会去完成Omi的Component的基本锥形，让其能够渲染第一个组件。 omi.js实现 var Omi...

王岩威 2019-08-20 14:14 评论0 收藏0
Omi原理-Hello Omi

摘要：注意，这里目前没有引入，不管第几次渲染都是无脑设置，复杂结构对浏览器的开销很大，这里后续会引入。整合这里把给直接暴露在下，因为每个组件都生成了唯一的，后续实现事件作用域以及对象实例获取都要通过下的获取。 Hello Omi Omi框架的每个组件都继承自Omi.Component，本篇会去完成Omi的Component的基本锥形，让其能够渲染第一个组件。 omi.js实现 var Omi...

developerworks 2019-08-05 10:46 评论0 收藏0
库 - 收藏集 - 掘金

摘要：历时一年，官方已经新增章节，我们再次发力，于下雨，飘雪，红包雨，碰撞球，自定义掘金效果展示有没有兴趣继续看下去，直接看下颜值是第一步了。【福利】成为专业程序员路上用到的各种优秀资料、神器及框架 - 工具资源 - 掘金本文是鄙人工作这几年随手收集整理的一些自认为还不错的资料，成长的道理上需要积累，这么长时间了，是时候放出来分享下了，或许能帮助到你。欢迎点赞，让更多人看到，让福利普照。...

qc1iu 2019-06-25 11:23 评论0 收藏0
2017年试试Web组件化框架Omi

摘要：不用担心组件的会污染组件外的会帮你处理好一切更自由的更新，每个组件都有方法，自由选择时机进行更新。通过安装点击这里在线试试你可以使用来生成组件标签用于嵌套。点击这里试试写程序加入吧 Omi Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/o...

JowayYoung 2019-08-20 14:08 评论0 收藏0