如何解决browserify(基于Backbone的应用程序)和require.js在同一页面上的冲突？

Question

我有一个骨干应用程序正常运行.它意味着在第3页中用作小部件.不幸的是,我刚刚意识到其中一个页面已经加载了Backbone/underscore.

我得到这样的错误:

Uncaught TypeError: Cannot read property 'extend' of undefined 

通常在先前未加载下划线时出现.

我的典型视图是这样的:(正常的Backbone视图)

./view1.js

var Backbone = require('backbone')
var _ = require('underscore')
var $ = require('jquery')
Backbone.$ = $

module.exports = Backbone.View.extend({

  events: {

  },

  initialize: function () {

  },

  render: function () {

  }
})

然后我只需要打电话给它:

var View1 = require('view1')
var view1Instance = new View1(...)

谢谢你的帮助 :)

调查后编辑:当运行调试器时,看起来Backbone变量是一个空对象而不是Backbone.好像require('backbone')刚回来了{}

编辑2:这似乎与这个问题有关:https://github.com/substack/node-browserify/issues/790

Answer 1

Backbone和Requirejs的问题(如thlorenz所示)

• 骨干寻找define寻找module.exports前
• requirejs使用全局变量,这不是一个好习惯,在这种情况下会导致问题,因为它会影响在同一浏览器选项卡中运行的所有内容

他建议将所有内容包装在一个范围内并隐藏该define功能.他还有一个工具来做到这一点.browserify-垫片

但是我没有使用它,而是使用Browserify的postBundleCB选项:(对于同事来说).

在我的Gruntfile:

browserify: {
  dist: {
    src: ['src/app/app.js'],
    dest: 'www/app.js',
    options: {
      postBundleCB: function (err, src, next) {
        return next(null, '(function () { var define = undefined; '+src+' })();')
      }
    }
  }
},

这解决了我的问题:)

我没有尝试使用browserify-shim,所以我对此并不了解.