Browserify 分离 libs.js 和 app.js 导致 Backbone 找不到 jQuery答案

【问题标题】：Browserify separate libs.js and app.js causes Backbone to not find jQueryBrowserify 分离 libs.js 和 app.js 导致 Backbone 找不到 jQuery
【发布时间】：2014-01-17 07:31:44
【问题描述】：

我想将我的库和我的应用程序代码拆分到单独的包中，以便我可以为每个单独插入脚本标签，因为我不希望将 jQuery、Backbone 和 Underscore 添加到我的每个应用程序包中。

但是，我尝试了几种方法，每次我从 Backbone 收到错误消息：

Uncaught TypeError: Cannot read property 'ajax' of undefined

我正在编译一个如下所示的 libs.js 文件：

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

我不得不手动下载 jQuery 并将其填充到我的 /src/vendor 文件夹中，因为 nom install jquery 只是由于某种原因而失败。

我还有一些简单的测试应用代码可以编译成 app.js：

// User.js
var Backbone = require('backbone')
module.exports = User = Backbone.Model.extend({
  url : '/user'
});

// app.js
var User = require('./user');
var u = new User()

u.on('change', function(e){
  $('h1').append('Updated!')
});

u.fetch()

在我的 HTML 中，libs.js 的脚本标记在 app.js 之前。

也许我从一开始就以一种奇怪的方式处理了整个事情，因为在以这种方式使用这些库时，谷歌搜索的方式似乎没有太大帮助，所以任何输入非常感谢！

【问题讨论】：

你试过 Backbone.$ = $ 吗？

标签： javascript jquery backbone.js browserify

【解决方案1】：

我阅读了更多关于 Browserify 中的外部化、别名和匀场的信息。我终于能够组合出一个可行的 Coffeescript gruntfile 配置：

browserify:
  libs:
    src: ['src/vendor/jquery.js', 'underscore', 'backbone'],
    dest: 'public/js/libs.min.js'
    options:
      alias: ['backbone:', 'underscore:']
      shim:
        jQuery:
          path: 'src/vendor/jquery'
          exports: '$'
  home:
    src: ['src/js/main-home.js']
    dest: 'public/js/main-home.min.js'
    options:
      external: ['backbone', 'underscore']

在 main-home.js 中，我现在可以执行 var Backbone = require('backbone') 和 Backbone.$ = $ 并且一切正常。

【讨论】：

我正在使用非常相似的设置，但我注意到 Backbone 包含在 libs 包和 home 包中。你遇到过同样的问题吗？

【解决方案2】：

似乎 jQuery 未正确加载，该错误可能是因为您尝试调用 $.ajax 但 $ 未定义。

也许另一个原因可能是因为您尝试在Backbone 之前加载jQuery。尝试相反的方式，在 jQuery 之前包含您的 Backbone。

【讨论】：

我认为在 Backbone 之前加载 jQuery 会更好，但我尝试了你的建议。它没有帮助。我认为这可能是由于 browserify 中的一些窗口泄漏预防措施。