javascript - Browserify 分离 libs.js 和 app.js 导致 Backbone 找不到 jQuery

Question

我想将我的库和我的应用程序代码拆分成单独的包，这样我就可以分别为每个包插入脚本标签，因为我不希望将 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 的脚本标记之前。

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

Answer 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.$ = $ 一切正常。