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

Question

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

我收到这样的错误:

Uncaught TypeError: Cannot read property 'extend' of undefined 

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

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

./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 ( as indicated by thlorenz here ) 的问题

• backbone looks for define before looking for module.exports
• requirejs works with globals which is not good practice and in this case causes problems since it affects everything that runs in the same browser tab

他建议将所有内容都包装在一个范围内并隐藏 define 函数。
他还有一个工具可以做到这一点。 browserify-shim

但是，我没有使用它，而是使用 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，所以我对它了解不多。