查看: 770|回复: 0

[JavaScript/JQuery] Omi原理-环境搭建

发表于 2017-4-20 08:00:01
环境搭建

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

  1. "devDependencies": {
  2. "babel-core": "^6.0.20",
  3. "babel-loader": "^6.0.1",
  4. "babel-preset-es2015": "^6.0.15",
  5. "node-libs-browser": "^0.5.3",
  6. "webpack": "^1.14.0",
  7. "jasmine-core": "^2.5.2",
  8. "karma": "^1.3.0",
  9. "karma-chrome-launcher": "^2.0.0",
  10. "karma-jasmine": "^1.1.0",
  11. "karma-webpack": "^1.8.1"
  12. }
复制代码

ES6+相关依赖有babel-core、babel-loader和babel-preset-es2015

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

  1. loaders: [
  2. {
  3. loader: 'babel-loader',
  4. test: /\.js$/,
  5. query: {
  6. presets: 'es2015',
  7. }
  8. }
  9. ]
复制代码

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

其余都是单元测试相关依赖

  1. 注意,这里使用了karma-webpack。因为使用Omi框架支持ES6+和ES5,使用karma-webpack是为了在单元测试里面使用ES6+的import和Class等语法。
复制代码

在karma.conf.js中配置webpack:

  1. webpack: webpackConfig,
  2. webpackMiddleware:{
  3. noInfo:false
  4. },
  5. plugins: [
  6. 'karma-webpack',
  7. 'karma-jasmine',
  8. 'karma-chrome-launcher'
  9. ]
复制代码

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

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

  1. // if true, Karma captures browsers, runs the tests and exits
  2. singleRun: true,
复制代码

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

npm 脚本
  1. "scripts": {
  2. "build": "webpack -w",
  3. "test": "karma start test/karma.conf.js",
  4. "hello": "webpack -w",
  5. "todo": "webpack -w"
  6. }
复制代码

其中:

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配置:

  1. if(ENV === 'build'){
  2. config = {
  3. entry: {
  4. omi: './src/index.js'
  5. },
  6. output: {
  7. path: 'dist/',
  8. library:'Omi',
  9. libraryTarget: 'umd',
  10. filename: '[name].js'
  11. },
复制代码

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

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

  1. else {
  2. config.entry = './example/' + ENV + '/main.js';
  3. config.output.path = './example/' + ENV + '/';
  4. }
复制代码

会去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)



回复

使用道具 举报