使用RequireJS加载Marionette(v3)的正确方法是什么?

时间:2016-07-29 15:32:03

标签: javascript backbone.js requirejs bower marionette

我徒劳无功地搜索了Google如何加载 Marionette v3-pre.4 - 最新版本到现在(2016年7月) - RequireJS < /强>

RequireJS 似乎打破了该库的捆绑版本,因此我必须手动包含“ backbone.babysitter ”和“ backbone.radio “这个版本的木偶版本需要。

根据: versioneye.com 我需要:

  • backbone.babysitter 1.0.0-pre.1
  • backbone.radio ”* 2.0.0-pre.1 *

所以我尝试用 Bower

安装它们
  

bower安装backbone.babysitter

它返回了:

Unable to find a suitable version for backbone.babysitter, please choose one by typing one of the numbers below:
    1) backbone.babysitter#^0.1.12 which resolved to 0.1.12
    2) backbone.babysitter#1.0.0-pre.1 which resolved to 1.0.0-pre.1 and is required by marionette#3.0.0-pre.4

Prefix the choice with ! to persist it to bower.json

我选择了第二个这样的人:

? Answer !2

它返回了:

bower resolution    Saved backbone.babysitter#1.0.0-pre.1 as resolution

我对 backbone.radio

做了同样的事情
  

bower install backbone.radio

返回:

Unable to find a suitable version for backbone.radio, please choose one by typing one of the numbers below:
    1) backbone.radio#^1.0.5 which resolved to 1.0.5
    2) backbone.radio#2.0.0-pre.1 which resolved to 2.0.0-pre.1 and is required by marionette#3.0.0-pre.4

Prefix the choice with ! to persist it to bower.json

选择的:

  

?回答!2

返回:

bower resolution    Saved backbone.radio#2.0.0-pre.1 as resolution

一切似乎都没问题,但当我在每个“ bower.json ”文件中检查这两个库的版本时,我发现:

backbone.babysitter 位于:

  "name": "backbone.babysitter",
  "version": "0.1.11"

backbone.radio

  "name": "backbone.radio",
  "version": "1.0.4"

我哪里出错了?

这是我的 bower.json

{
  "name": "Example App",
  "authors": "Consta Gorgan",
  "dependencies": {
    "backbone": "~1.2.3",
    "backbone.radio": "~2.0.0",
    "backbone.babysitter": "~1.0.0",
    "marionette": "~3.0.0",
    "requirejs": "~2.1.15",
    "requirejs-plugins": "~1.0.2"
  },
  "resolutions": {
    "backbone.radio": "2.0.0-pre.1",
    "backbone.babysitter": "1.0.0-pre.1"
  }
}

这是我的垫片文件:

requirejs.config({
  paths: {
    jquery: '../bower_components/jquery/dist/jquery',
    underscore: '../bower_components/underscore/underscore',
    backbone: '../bower_components/backbone/backbone',
    'backbone.radio': '../bower_components/backbone.radio/build/backbone.radio',
    'backbone.babysitter': '../bower_components/backbone.babysitter/src/build/backbone.babysitter',
    marionette: '../bower_components/marionette/lib/core/backbone.marionette'
  },
  shim: {
    jquery: {
      exports: '$'
    },
    backbone: {
      deps: [
        'underscore',
        'jquery'
      ],
      exports: 'Backbone'
    },
    underscore: {
      exports: '_'
    },
    marionette: {
      deps: [ 'jquery', 'underscore', 'backbone', 'backbone.radio', 'backbone.babysitter' ],
      exports: 'Marionette'
    }
  }
})

这就是我在 app.js 文件中加载RequireJS模块的方法:

define([
  'jquery',
  'underscore',
  'backbone',
  'marionette',
  'router'
], function ($, _, Backbone, Marionette, Router) {
  'use strict'

  var init = function () {
    Router.init()
  }

  return {
    init: init
  }
})

Aaand这是我在浏览器中遇到的错误:

Cannot set property 'VERSION' of undefined - *image*

再过几秒钟后这个:

Load timeout for modules: backbone.radio - *image*

2 个答案:

答案 0 :(得分:2)

而不是../bower_components/backbone.babysitter/src/build/backbone.babysitter使用../bower_components/backbone.babysitter/lib/backbone.babysitter

答案 1 :(得分:1)

如果有人碰到这个,v3.0改为删除保姆

requirejs.config({
    paths: {
        jquery: 'node_modules/jquery/dist/jquery',
        underscore: 'node_modules/underscore/underscore',
        backbone: 'node_modules/backbone/backbone',
        'backbone.radio': 'node_modules/backbone.radio/build/backbone.radio',
        marionette: 'node_modules/marionette/lib/backbone.marionette'
    },
    shim: {
        jquery: {
            exports: '$'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        'backbone.radio': {
            deps: [
                'underscore',
                'backbone'
            ],
            export: 'Radio'
        }
        underscore: {
            exports: '_'
        },
        marionette: {
            deps: [ 'jquery', 'underscore', 'backbone', 'backbone.radio' ],
            exports: 'Marionette'
        }
    }
});