Cant get Marionette working with Browserify - marionette

Question

Ive been banging my head against the wall for hours on this and Im just stumped. Any help is greatly appreciated!
Basically, super basic repo setup to get Browserify working with Backbone and Marionette. Just isnt happening.
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. My view is event simpler:
var Backbone = require('backbone');
module.exports = TestView = Backbone.View.extend({
render: function() {
$('body').append('<p>Hello world! (Backbone view rendered successfully!</p>');
}
});
And finally my package.json snippet specific to 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"
]
}
I feel like Im 99% there! The final issue is that jquery doesnt appear to be loading as a dependency for Marionette. The console.log thats in app.js shows that $ for the Marionette object is undefined. The error that shows in the console log when you run the app is:
this._deferred = Marionette.$.Deferred();
Uncaught TypeError: Cannot call method 'Deferred' of undefined
At this point its something stupid Im doing and I just cant put my finger on it. If its any easier, you can check out the repo of a super basic project I creates solely to figure this out.
https://github.com/jkat98/browserifytest
Thanks!!!!!!

Answer 1

Take a look at the browserify example we have done for people looking to use the stack you are asking about.
https://github.com/marionettejs/marionette-integrations/tree/master/browserify

Answer 2

(Full disclosure: I haven't used Browserify, but it seems very similar to ReuqireJS, so I'm basing my answer on that...)
Backbone requires jQuery, but you're not depending on it in your shim config. Try with:
"backbone": {
"exports": "Backbone",
"depends": [
"jquery:jQuery",
"underscore:underscore"
]
},
Then, you can also simply your Marionette config:
"backbone.marionette": {
"exports": "Marionette",
"depends": [
"backbone:Backbone"
]
}
You don't need the AMD versions of Marionette, etc. Just be aware that the non-AMD versions will register global variables (e.g. $).
In addition, you might be interested in the free sample chapter to my Marionette and RequireJS book to get you started.

Answer 3

We use marionette with browerify, but do it with cartero via the browserify option.

Answer 4

So I pretty much muscled through this and got it working. For anyone interested or in the future:
I decided to take the shim details out of package.json and put them in a separate config/shim.js file.
I also fixed the logic in the shim a bit to get it to actually work correctly. That was pretty much my problem, improperly defining dependencies. I also think I needed to separately define Wreqr and BabySitter as they are dependencies of Marionette.
updated package.json file:
"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 file:
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"
}
}
};

Answer 5

You don't need to specify it inside of a shim the problem is that the Marionette module doesn't have jQuery attached to it. In this example
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);
It should be like this, also use this as an example 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);
and then
this._deferred = Backbone.$.Deferred;

Answer 6

I also spent a lot of time searching for solutions, but it was much easier
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');
Full working example: https://gist.github.com/knpsck/a7c2ead6120c7dca152c