RequireJS未捕获的错误：匿名定义（anonymous define()）模块不匹配。

Question

在最小化的应用程序中使用RequireJS和Backbone时，我总是得到以下错误：

Uncaught Error: Mismatched anonymous define() module

即使应用程序仍在运行，也请注意以下内容：https://assets.site44.com/admin/。

我在index.html中包含了jQuery、underscore和backbone，因为我想要缩短每个视图/模型中的define()样板代码。 https://assets.site44.com/admin/js/main.js 包括：

 var l = console.log.bind(console)

var app
//l("AA")

require.config({
  paths: {
    // Major libraries
    /*jquery: 'libs/jquery/jquery-min',
    underscore: 'libs/underscore/underscore-min', // https://github.com/amdjs
    backbone: 'libs/backbone/backbone-min', // https://github.com/amdjs
*/
    // Require.js plugins
    text: 'text'

  }

})


function initApp() {
  console.log("BB")

  require([
    'views/AppView'
  ], function(AppView){
    l("CC")

    app = new AppView()
    $("#app").html(app.render())

  })
}

$(document).ready(initApp)

我无法从文档或这个已解决的问题中找出问题所在：

“匹配不上的匿名define()模块”

谢谢。

- user3036808

---

你的代码有很多语法错误，尤其是缺少分号。我强烈建议先解决这些问题。也许可以取消注释 jQuery、Underscore 和 Backbone 的路径，因为你的代码依赖它们的包含，并在 AppView 和 MyModel 的 define() 调用中包含它们。 - Simon Adcock

嗨，西蒙，我想避免在每个视图/模型/集合中定义jQuery、Underscore和Backbone。我不确定你所指的语法错误是什么——添加分号并不能消除那个错误。 - user3036808

你不需要在每个视图、模型和集合中都定义它们，但你肯定需要在所有这些组件中使用Backbone。如果你相信JavaScript本身不可靠的自动分号插入功能，你可以省略分号。不过我不确定为什么你要这样做。这是一个常见的错误来源，很难追踪到问题所在。 - Simon Adcock

Answer 1

我在index.html中包含了jQuery、underscore和backbone，因为我想缩短每个视图/模型中define()样板代码的长度。

你不应该这样做。如果你google "Uncaught Error: Mismatched anonymous define() module"，你会发现最上面的链接是RequireJS FAQ，解释道：

如果你手动在HTML中编写一个脚本标签来加载具有匿名define()调用的脚本，就会出现此错误。

--编辑

如果你使用grunt，你可以使用grunt-generate轻松创建基于自定义模板的模块，当样板代码过多时，它可能会破坏你的一天 :)

免责声明：我编写了Grunt插件。

- Creynders

---

谢谢Creynders，但我对此不满意。我想要的是更少的代码，而不是一个（容易）为我生成代码的工具。 - user3036808

@user3036808 你尝试通过 window 对象访问它们了吗？例如 window.$。虽然我不建议这样做。为什么那几行额外的代码会让你如此烦恼呢？ - Creynders

1. 我希望尽可能少地使用样板代码。
2. 这个解决方案不适用于处理 jQuery 插件。

将这个： define([ 'jquery', 'underscore', 'backbone', 'models/MyModel', 'text!templates/mainTemplate.html' ], function($, _, Backbone, MyModel, mainTemplate){ 与这个进行比较： define([ 'models/MyModel', 'text!templates/mainTemplate.html' ], function(MyModel, mainTemplate){ - user3036808

不过，恐怕没有其他选择。 - Creynders

Answer 2

如果您在HTML中手动编写一个脚本标签以加载带有匿名define()调用的脚本，则可能会出现此错误。

如果您手动编写一个脚本标签以加载具有几个命名模块的脚本，但随后尝试加载一个匿名模块，并且该匿名模块最终与由手动编写的脚本标记加载的命名模块之一具有相同的名称，则会出现此错误。

- cstutorial

Answer 3

找到了解决方法：直接使用require()，而不是在ready处理程序中使用。

var l = console.log.bind(console)

var app
//l("AA")

require.config({
  paths: {
    // Major libraries
    /*jquery: 'libs/jquery/jquery-min',
    underscore: 'libs/underscore/underscore-min', // https://github.com/amdjs
    backbone: 'libs/backbone/backbone-min', // https://github.com/amdjs
*/
    // Require.js plugins
    text: 'text'

  }

})


  require([
    'views/AppView'
  ], function(AppView){
    l("CC")

    app = new AppView()
    $("#app").html(app.render())

  })

- user3036808

---

啊...这个错误似乎仍然在大约30%的情况下出现，看起来是随机的。 - user3036808

已经找到问题并彻底解决了：在引入 require.js 之前必须先引入 less.js。 - user3036808

包含 less.js 在 require.js 之前不是“正确的解决方案”——正确的解决方案是让 requirejs.config() 处理 less.js，如果必要的话可能需要使用 shim。 - Lee Goddard