如何使用 browserify 捆绑主干应用程序？答案

【问题标题】：How to use browserify to bundle a backbone app?如何使用 browserify 捆绑主干应用程序？
【发布时间】：2013-11-02 22:16:19
【问题描述】：

我在使用 browserify 时遇到了一点问题。

目标

我正在尝试使用 Backbone 构建基本的 TodoMVC 单页应用程序，而不是我的 index.html 中的大量 <script> 标签，我试图将它们全部与 browserify 捆绑在一起。

这是我到目前为止所做的。

lib/models/todo.js

var backbone = require("backbone");

var Todo = module.exports = backbone.Model.extend({

  defaults: function() {
    return {
      title: "",
      completed: false,
      createdAt: Date.now(),
    };
  },

});

lib/collections/todo.js

var backbone     = require("backbone"),
    LocalStorage = require("backbone.localstorage");

var TodoCollection = module.exports = backbone.Collection.extend({

  localStorage: new LocalStorage('todomvc'),

});

lib/app.js

var Todo            = require("./models/todo"),
    TodoCollection  = require("./collections/todo");

(function(global) {

  global.todoCollection = new TodoCollection([], {model: Todo});

})(window);

为了构建我的捆绑包，我正在使用

browserify lib/app.js > js/app.js

最后，我的index.html 很简单

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Todo MVC</title>
  </head>
  <body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="/js/app.js"></script>
  </body>
</html>

问题

当我打开控制台并尝试运行此命令时

todoCollection.create({title: "My first todo"});

我收到一个错误

“无法读取未定义的属性‘延迟’”

堆栈跟踪

TypeError: Cannot read property 'Deferred' of undefined
    at Backbone.LocalStorage.sync.window.Store.sync.Backbone.localSync (http://localhost:4000/js/app.js:182:47)
    at Backbone.sync (http://localhost:4000/js/app.js:255:40)
    at _.extend.sync (http://localhost:4000/js/app.js:1773:28)
    at _.extend.save (http://localhost:4000/js/app.js:1979:18)
    at _.extend.create (http://localhost:4000/js/app.js:2370:13)
    at <anonymous>:2:16
    at Object.InjectedScript._evaluateOn (<anonymous>:580:39)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:539:52)
    at Object.InjectedScript.evaluate (<anonymous>:458:21)

问题

我已经对如何浏览主干应用程序进行了大量搜索，但我几乎没有找到符合我目标的东西。

如何将我的单页主干应用程序捆绑到我可以在 html 中要求的单个 app.js 中？

顺便说一句

我也不确定我是否正确地包含了 jQuery。如果 Backbone 也不是我的 browserified 捆绑包的一部分，那么 Backbone 是否会无法将其连接到 jQuery？

非常感谢任何提示。

【问题讨论】：

这与这里的问题相同：stackoverflow.com/questions/19528559/…
@vkurchatkin，我不确定。我的错误与 jQuery 无关，而且我的 Backbone 代码还没有处理 DOM。也就是说，我可能是错的......

标签： javascript node.js backbone.js browserify

【解决方案1】：

编辑：

最新版本的 jquery 已通过 npm 分发和使用！这使得在 browserify 中使用 jquery 更简单。

我们现在需要做的就是安装软件包：

npm install jquery backbone

并且需要模块：

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

旧答案：

我已经成功地使用了jquery-browserify 模块。

运行npm install jquery-browserify backbone

在名为 app-view.js 的文件中创建视图模块：

var Backbone = require('backbone');
var $ = require('jquery-browserify');
Backbone.$ = $;

module.exports = Backbone.View.extend({
  initialize: function(){
    this.render();
  },

  render: function(){
    console.log('wuuut')
    $('body').prepend('<p>wooooooooooooooo</p>');
  }
});

使用模块：

var AppView = require('./app-view')

var appView = new AppView();

您可以像在代码中一样将 jquery 保留在脚本标记中，而不是使用 jquery-browserify，但在这种情况下，而不是这样：

var $ = require('jquery-browserify');
Backbone.$ = $;

我会这样做：

var $ = Backbone.$ = window.$;

【讨论】：

你应该也可以使用 browserify-shim 来解决这个问题： "browserify-shim": { "jquery": "$", "log4js": "Log4js", "underscore": " _", "backbone": { "exports": "Backbone", "depends": [ "jquery:$", "underscore:underscore" ] }

【解决方案2】：

从 jQuery v2 开始，它能够将自己暴露为 module.exports。也就是说，您可以安装 jquery 模块而不是 jquery-browserify 之类的模块。

npm install jquery backbone

但是还是需要手动修正Backbones$属性。

var backbone = require('backbone')
backbone.$ = require('jquery')

【讨论】：

【解决方案3】：

这是一个 100% 的 jQuery 问题。错误是：无法读取未定义的属性“延迟”。 Deferred 应该在哪里？在 jQuery (http://api.jquery.com/jQuery.Deferred/) 中。这是导致错误的特定行：https://github.com/jeromegn/Backbone.localStorage/blob/master/backbone.localStorage.js#L145。当您第一次需要骨干网时，只需执行 Backbone.$ = window.$ 即可。

【讨论】：