2014-01-12 3 views
2

Я бил головой о стену часами на этом, и я просто в тупике. Любая помощь очень ценится!Не могу получить Marionette, работая с Browserify

В принципе, супер базовая настройка репо, чтобы получить Browserify, работая с Backbone и Marionette. Просто не происходит.

app.js:

var View = require('./view'), 
$ = require('jquery'), 
Backbone = require('backbone'), 
Marionette = require('backbone.marionette'); 

Backbone.$ = window.$; 

var myview = new View(); 
myview.render(); 

$('body').css('background-color','#f0f0f0'); 

var mapp = new Marionette.Application(); 
console.dir(Marionette); 

Simple. На мой взгляд событие проще:

var Backbone = require('backbone'); 

module.exports = TestView = Backbone.View.extend({ 

    render: function() { 
     $('body').append('<p>Hello world! (Backbone view rendered successfully!</p>'); 
    } 
}); 

И, наконец, мои package.json фрагмент кода специфичны для browserify:

"browser": { 
     "jquery": "./requires/jquery.js", 
     "underscore": "./requires/underscore.js", 
     "backbone": "./requires/backbone.js", 
     "backbone.wreqr": "./requires/backbone.wreqr.js", 
     "backbone.babysitter": "./requires/backbone.babysitter.js", 
     "backbone.marionette": "./requires/backbone.marionette.js" 
    }, 
    "browserify-shim": { 
     "jquery": "$", 
     "underscore": "_", 
     "backbone": { 
      "exports": "Backbone", 
      "depends": [ 
       "underscore:underscore" 
      ] 
     }, 
     "backbone.babysitter": { 
      "exports": "Backbone.BabySitter", 
      "depends": [ 
       "backbone:Backbone" 
      ] 
     }, 
     "backbone.wreqr": { 
      "exports": "Backbone.Wreqr", 
      "depends": [ 
       "backbone:Backbone" 
      ] 
     }, 
     "backbone.marionette": { 
      "exports": "Marionette", 
      "depends": [ 
       "jquery:jQuery", 
       "backbone:Backbone", 
       "underscore:_" 
      ] 
     } 
    }, 
    "browserify": { 
     "transform": [ 
      "browserify-shim" 
     ] 
    } 

Я чувствую, что Im 99% там! Последняя проблема заключается в том, что jquery, похоже, не загружается как зависимость для Marionette. В console.log, который находится в app.js, показано, что $ для объекта Marionette не определено. Ошибка, которая показывает в журнале консоли при запуске приложения:

this._deferred = Marionette.$.Deferred(); 
Uncaught TypeError: Cannot call method 'Deferred' of undefined 

В этот момент его что-то глупо Im делать, и я просто не могу положить мой палец на нем. Если это будет проще, вы можете проверить репо супер базового проекта, который я создаю, чтобы понять это.

https://github.com/jkat98/browserifytest

спасибо !!!!!!

+0

я должен просто быть с помощью AMD версии backbone.marionette и wreqr, няня? Пробовал немного, но с этим тоже вращался. – jkat98

ответ

1

(Полное раскрытие: я не использовал Browserify, но мне кажется, очень похож на ReuqireJS, поэтому я основывая свой ответ на это ...)

Backbone требует JQuery, но вы не в зависимости на нем в конфигурации прокладки. Попробуйте с:

"backbone": { 
     "exports": "Backbone", 
     "depends": [ 
      "jquery:jQuery", 
      "underscore:underscore" 
     ] 
    }, 

Затем, вы можете также просто ваш кукольный конфигурации:

"backbone.marionette": { 
     "exports": "Marionette", 
     "depends": [ 
      "backbone:Backbone" 
     ] 
    } 

Вам не нужны версии AMD марионеток и т.д. Просто надо знать, что не-AMD версии будет регистрировать глобальные переменные (например, $).

Кроме того, вас может заинтересовать бесплатный sample chapter на номер Marionette and RequireJS book, чтобы вы начали.

0

Мы используем марионетку с browerify, но делаем это с помощью cartero через опцию browserify.

0

Так что я в значительной степени мускулировал это и заработал. Для всех, кто заинтересован или в будущем:

  1. Я решил взять данные прокладки из package.json и поместить их в отдельный файл config/shim.js.
  2. Я также исправил логику в прокладке немного, чтобы заставить ее работать правильно. Это была моя проблема, неправильно определяющая зависимости. Я также думаю, что мне нужно было отдельно определить Wreqr и BabySitter, поскольку они зависят от Marionette.

обновленный пакет.JSON файл:

"browser": { 
    "jquery": "./client/requires/jquery/js/jquery.js", 
    "underscore": "./client/requires/underscore/js/underscore.js", 
    "backbone": "./client/requires/backbone/js/backbone.js", 
    "backbone.wreqr": "./client/requires/backbone.wreqr/js/backbone.wreqr.js", 
    "backbone.babysitter": "./client/requires/backbone.babysitter/js/backbone.babysitter.js", 
    "backbone.marionette": "./client/requires/backbone.marionette/js/backbone.marionette.js" 
    }, 
    "browserify-shim": "./config/shim.js", 
    "browserify": { 
    "transform": [ 
     "browserify-shim", 
     "hbsfy" 
    ] 
    } 

.config/shim.js файл:

module.exports = { 
    "jquery": "$", 
    "underscore": "_", 
    "backbone": { 
     "exports": "Backbone", 
     "depends": { 
      "jquery":"$", 
      "underscore":"underscore" 
     } 
    }, 
    "backbone.babysitter": { 
     "exports": "Backbone.BabySitter", 
     "depends": { 
      "backbone":"Backbone" 
     } 
    }, 
    "backbone.wreqr": { 
     "exports": "Backbone.Wreqr", 
     "depends": { 
      "backbone":"Backbone", 
      "underscore":"_" 
     } 
    }, 
    "backbone.marionette": { 
     "exports": "Marionette", 
     "depends": { 
      "backbone":"Backbone", 
      "backbone.wreqr":"Backbone.Wreqr", 
      "backbone.babysitter":"Backbone.BabySitter" 
     } 
    } 
}; 
+0

N.B. существуют различные способы указания псевдонимов в файле package.json vs shim config: https://github.com/thlorenz/browserify-shim/tree/93356e85#c-config-inside-configshimjs-without-allases – alxndr

-1

Я также потратил много времени на поиск решений, но это было намного проще

package.json

... 
"dependencies": { 
    "backbone": "^1.1.2", 
    "handlebars": "^2.0.0", 
    "jquery": "^2.1.1", 
    "lodash": "^2.4.1", 
    "backbone.marionette": "^2.2.1" 
} 
... 

gruntfile.js

... 
    browserify: { 
     vendor: { 
      src: 'src/js/vendor.js', 
      dest: 'dist/js/vendor.js', 
      options: { 
       alias: [ 
        './node_modules/handlebars/runtime.js:handlebars', 
        './node_modules/lodash/dist/lodash.underscore.js:underscore', 
        'jquery:', 
        'backbone:', 
        'backbone.marionette:' 
       ] 
      } 
     }, 
     application: { 
      src: 'src/js/application.js', 
      dest: 'dist/js/application.js', 
      options: { 
       browserifyOptions: { 
        debug: true 
       }, 
       external: [ 
        'handlebars', 'underscore', 'jquery', 'backbone', 'backbone.marionette' 
       ] 
      } 
     } 
    } 
... 

SRC/JS/vendor.js

require('backbone').$ = require('jquery'); 

SRC/JS/application.js

var Marionette = require('backbone.marionette'); 

Полный рабочий пример: https://gist.github.com/knpsck/a7c2ead6120c7dca152c

+0

Пока эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответные ссылки могут стать недействительными, если связанная страница изменится. – APerson

+0

Вы правы, исправлены – knpsck

0

Вам не нужно указать это внутри прокладки, проблема в том, что модуль Marionette не имеет прикрепленного к нему jQuery. В этом примере

var $ = require('jquery'), 
Backbone = require('backbone'), 
Marionette = require('backbone.marionette') 

Backbone.$ = window.$; 

var View = require('./view'); 
var myview = new View(); 
myview.render(); 

$('body').css('background-color','#f0f0f0'); 

var mapp = new Marionette.Application(); 
console.dir(Marionette); 

Это должно быть так, а также использовать это в качестве примера https://github.com/thejameskyle/marionette-wires/blob/master/src/plugins.js

$ = require('jquery'); 
Backbone = require('backbone'), 
Backbone.$ = $ 
Marionette = require('backbone.marionette'); 

var myView = new View(); 
myView.render(); 

$('body').css('background-color','#f0f0f0'); 

var myApp = new Marionette.Application(); 
console.dir(Marionette); 

, а затем

this._deferred = Backbone.$.Deferred;