骨干.localStorage，require.js，“未捕获的类型错误：未定义不是函数”答案

【问题标题】：backbone.localStorage, require.js, "Uncaught TypeError: undefined is not a function"骨干.localStorage，require.js，“未捕获的类型错误：未定义不是函数”
【发布时间】：2013-08-04 17:56:46
【问题描述】：

我在 http://kilon.org/blog/2012/08/build-backbone-apps-using-requirejs/ 关注 Uzi Kilon 的 BackboneJS/RequireJS/backbone.LocalStorage 示例。

当我git clone https://github.com/uzikilon/Todos 时，它工作得很好——但它使用的是旧版本的主干.localstorage。但是，如果我将lib/backbone.localStorage 替换为较新版本的http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min，那么我会在这里得到“未捕获的类型错误：未定义不是函数”：https://github.com/uzikilon/Todos/blob/master/js/models/Todo.js#L3 - 为什么？我认为这与http://requirejs.org/docs/api.html#config-shim 的棘手细节有关，或者可能是：http://blog.mostlystatic.com/2013/01/backbone-localstorage-uncaught.html。

require.config({
  baseUrl: "./js/",
  paths: {
    jquery: 'lib/jquery-1.8.2',
    underscore: 'lib/underscore-1.4.2',
    backbone: 'lib/backbone-0.9.2',
//    'backbone.localStorage': 'lib/backbone.localStorage'
    'backbone.localStorage': 'http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min'

  },
  shim: {
    underscore: {
      exports: "_"
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'backbone.localStorage': {
      deps: ['backbone'],
      exports: 'Backbone'
    }
  }
});

【问题讨论】：

它在调试器中触发哪一行？ Chrome 开发工具会告诉你哪条线断了
我已经用这一行更新了示例。基本上，RequireJS 没有正确包含它 - 为什么？

标签： backbone.js requirejs local-storage

【解决方案1】：

问题在于最新的 Backbone localStorage 与 AMD 兼容，而该示例中的版本不兼容，因此需要 shim 配置。

修复

删除主干.localStorage 的shim 配置，您将不再需要它：

'backbone.localStorage': {
  deps: ['backbone'],
  exports: 'Backbone'
}

然后，在Todo.js 中更改定义调用：

define(['underscore', 'backbone.localStorage'], function(_, Backbone) {

到：

define(['underscore', 'backbone', 'backbone.localStorage'], function(_, Backbone) {

为什么？

垫片exports 配置被用来说“当我要求backbone.localStorage 时，将Backbone 还给我”。

这允许“backbone.localStorage”在 Todo 模块中简单地用作主干。

但现在 backbone.localStorage 支持 AMD 并从 define 调用中显式返回一个值。所以Todo.js中Backbone的值不再是Backbone库，实际上是Backbone.LocalStorage的构造函数

据我了解，shim 配置被 AMD 模块忽略，或者至少不应该使用：

仅使用其他“垫片”模块作为垫片脚本的依赖项，或没有依赖关系并在它们之后调用 define() 的 AMD 库还创建一个全局（如 jQuery 或 lodash）。否则，如果您使用 AMD 模块作为 shim 配置模块的依赖项，在构建之后，该 AMD 模块可能不会被评估，直到在构建执行，将发生错误。最终的解决方法是升级所有填充代码以具有可选的 AMD define() 调用。

为了解决问题，需要在 Todo.js 中添加额外的依赖项，以便回调参数匹配。

希望这是有道理的。

【讨论】：