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

一尘不染

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

node.js

我在使用browserify时遇到了一些麻烦。

目标

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

到目前为止，这就是我要做的。

lib /模型/todo.js

var backbone = require("backbone");

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

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

});

lib /收藏/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"});

我得到一个错误

“无法读取未定义的属性’Deferred’”

堆栈跟踪

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)

问题

我已经做了很多关于如何浏览器骨干应用程序的搜索，但是对于符合我的目标的事情我发现得很少。

如何将我的单页主干应用捆绑到app.jshtml中可能需要的单个应用中？

作为旁白

我不确定我是否也正确包含了jQuery。如果Backbone也不属于我的浏览器捆绑包，它会很难将自己连接到jQuery？

任何提示，不胜感激。

阅读 200

2020-07-07

共1个答案

一尘不染

编辑：

最新版本的jquery可通过npm分发和使用！这使得将jquery与browserify一起使用更加简单。

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

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.$;

2020-07-07