無法獲得木偶與Browserify

Question

我一直在我的頭靠牆撞了幾個小時在這和Im只是難倒。任何幫助是極大的讚賞！

基本上，超級基本回購設置讓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似乎沒有加載作爲木偶的依賴。 app.js中的console.log顯示$對於Marionette對象是未定義的。顯示在控制檯日誌當您運行的應用程序是錯誤：

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

此時它的一些愚蠢的Im做，我只是不能把我的手指上。如果它更容易，你可以看看我創建的超級基礎項目的回購，只是爲了解決這個問題。

https://github.com/jkat98/browserifytest

感謝!!!!!!

Answer 1

（全面披露：我沒有用過Browserify，但似乎非常相似，ReuqireJS，所以我我的基礎上的答案...）

骨幹需要jQuery的，但你不依賴在你的shim配置中。試着用：

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

然後，你也可以簡單的提線木偶的配置：

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

你不需要木偶等的AMD版本要知道，非AMD版本將註冊全局變量（例如$）。

另外，您可能會對我的Marionette and RequireJS book免費sample chapter感興趣，以幫助您入門。

Answer 2

我們使用牽線木偶與browerify，但通過選項與cartero。

Answer 3

所以我非常努力通過這個，並得到它的工作。對於任何有興趣或未來的人：

1. 我決定從package.json中取出墊片細節，並將它們放在單獨的config/shim.js文件中。
2. 我還修復了墊片中的邏輯，使其實際上正常工作。這幾乎是我的問題，不恰當地定義依賴關係。我還認爲我需要單獨定義Wreqr和BabySitter，因爲它們是木偶的依賴關係。

更新包。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 4

看看我們的人希望使用你問有關堆棧完成browserify例子。

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

Answer 5

我也花了很多時間尋找解決方案，但它是非常容易

的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

Answer 6

你並不需要指定它在一個墊片裏面的問題是，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;