Question

我一直在墙上撞了几个小时，我只是难倒了。非常感谢任何帮助！

基本上，超级基本的repo设置让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);

简单。我的观点更简单：

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"
        ]
    }

我觉得我99％在那里！最后一个问题是jquery似乎不是作为Marionette的依赖加载。 app.js中的console.log显示Marionette对象的$未定义。运行应用程序时在控制台日志中显示的错误是：

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

此时我正在做一些愚蠢的事情，我只是不能把手指放在上面。如果它更容易，你可以查看我创建的超级基础项目的回购，仅仅是为了解决这个问题。

https://github.com/jkat98/browserifytest

感谢!!!!!!

Answer 1

看看我们为那些希望使用您所询问的堆栈的人所做的browserify示例。

https://github.com/marionettejs/marionette-integrations/tree/master/browserify

Answer 2

（完全披露：我没有使用过Browserify，但它似乎与ReuqireJS非常相似，所以我的答案就是基于......）

Backbone需要jQuery，但你不要在你的shim配置中依赖它。试试：

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

然后，您也可以简单地使用Marionette配置：

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

您不需要AMD版本的Marionette等。请注意，非AMD版本将注册全局变量（例如$）。

此外，您可能对我的sample chapter免费Marionette and RequireJS book感兴趣，以帮助您入门。

Answer 3

我们使用带有browerify的木偶，但是通过browserify选项使用cartero。

Answer 4

所以我几乎通过这个实现了这个并且让它发挥作用。对于任何有兴趣或将来的人：

我决定从package.json中取出垫片细节，并将它们放在一个单独的config / shim.js文件中。
我还修改了垫片中的逻辑以使其实际正常工作。这几乎是我的问题，不正确地定义依赖关系。我还认为我需要单独定义Wreqr和BabySitter，因为它们是Marionette的依赖。

更新了package.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"
        }
    }
};

Answer 5

你不需要在垫片中指定它，问题是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;

Answer 6

我也花了很多时间寻找解决方案，但这更容易

的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

不能让Marionette与Browserify合作

6 个答案: