不匹配的匿名 Definition()模块

当我第一次浏览我的 网络应用时(通常是在一个禁用缓存的浏览器中) ,我得到了这个错误。

错误: 不匹配的匿名释义()模块: 函数(要求){

HTML :

<html>
.
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script> var require = { urlArgs: "v=0.4.1.32" }; </script>
<script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
<script src="assets/js/ace/ace.js?v=0.4.1.32"></script>
</body>
</html>

JS :

$(function () {
define(function (require) {
// do something
});
});

有人确切知道这个错误意味着什么以及为什么会发生吗?

源文件 ,在 github 问题页面中有一个关于它的 简短的讨论

246273 次浏览

根据 医生:

如果在 HTML 中手动编写脚本标记以使用 调用,则可能发生此错误。

也看到如果你 在 HTML 中手动编写脚本标记,以加载具有几个 命名模块,然后尝试加载一个匿名模块,结果 与加载的脚本中的一个命名模块具有相同的名称 通过手动编码的脚本标记。

最后,如果使用加载程序 插件或匿名模块(调用 fix ()的模块没有 字符串 ID) ,但不要使用 RequreJS 优化器组合文件 此错误可能会同时发生。优化器知道如何命名 正确地使用匿名模块,以便它们可以与其他 模块在一个优化的文件。

为了避免错误:

  • 确保通过 RequreJSAPI 加载所有调用 Definition ()的脚本。 不要在 HTML 中手动编写脚本标记来加载具有 在它们中定义()调用。

  • 如果手动编写 HTML 脚本标记,则为 确保它只包含命名的模块,并且一个匿名模块 将具有与该文件中的一个模块相同的名称 上膛了。

  • 如果问题是使用加载程序插件或匿名 模块,但是 RequreJS 优化器不用于文件捆绑,请使用 RequreJS 优化器。

就像 AlienWebguy 说的,根据文件 需求 Js 可能会爆炸如果

  • 在它自己的 script 标记中有一个匿名定义(“ 调用没有字符串 ID 的 fix ()的模块”)(我假设它们实际上指的是全局范围内的任何地方)
  • 模块的名称存在冲突
  • 你可以使用加载器插件或者匿名模块,但是不要使用 reque.js 的优化器来捆绑它们

我在将用 Browserify 构建的 bundle 与 Reque.js 模块一起包含时遇到了这个问题,解决方案是:

加载脚本标记中的非必需.js 独立包

使用 requ.js 加载它们(而不是使用脚本标记)

之所以出现这个错误,是因为我在脚本标记中直接包含了必需文件和其他库。这些库(比如 loash)使用了一个定义函数,该函数与需求的定义相冲突。需求文件是异步加载的,所以我怀疑需求的定义是在其他库定义之后定义的,因此存在冲突。

为了消除这个错误,可以通过使用 requlejs 来包含所有其他 js 文件。

请注意,有些浏览器扩展可以向页面添加代码。 在我的例子中,我有一个“ Emmet In all textareas”插件,它搞乱了我的需求 J。 通过在浏览器中检查文档,确保没有额外的代码添加到文档中。

现有的解决方案很好地解释了这个问题,但是如果由于遗留代码而不能很容易地包含使用或之前的脚本文件,那么一个有点古怪的解决方案就是在脚本标签之前从窗口范围中删除需求,然后在后面重新恢复它。在我们的项目中,这是封装在服务器端函数调用后面的,但是实际上浏览器会看到以下内容:

    <script>
window.__define = window.define;
window.__require = window.require;
window.define = undefined;
window.require = undefined;
</script>
<script src="your-script-file.js"></script>
<script>
window.define = window.__define;
window.require = window.__require;
window.__define = undefined;
window.__require = undefined;
</script>

不是最整洁的,但似乎工作,并节省了很多折射。

在开始使用 requ.js 时,我遇到了这个问题,作为一个初学者,医生可能也是用希腊语编写的。

我遇到的问题是,大多数初学者示例使用“匿名定义”,而您应该使用“字符串 id”。

匿名定义

define(function() {
return { helloWorld: function() { console.log('hello world!') } };
})
    

  

define(function() {
return { helloWorld2: function() { console.log('hello world again!') } };
})

用字符串 id 定义

define('moduleOne',function() {
return { helloWorld: function() { console.log('hello world!') } };
})


define('moduleTwo', function() {
return { helloWorld2: function() { console.log('hello world again!') } };
})

当您使用 使用字符串 id 定义时,当您尝试如下使用模块时,您将避免此错误:

require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
moduleOne.helloWorld();
moduleTwo.helloWorld2();
});

或者你可以用这种方法。

  • 在您的代码库中添加 reque.js
  • 然后通过该代码加载脚本

<script data-main="js/app.js" src="js/require.js"></script>

它将做什么,它将在加载了 reque.js 之后加载您的脚本。

我还在浏览器控制台上看到一个基于 require.js的项目出现了同样的错误。正如在 https://requirejs.org/docs/errors.htmlMISMATCHED ANONYMOUS DEFINE() MODULES下所述,这个错误有多个原因,在我的例子中有趣的一个是: If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer。事实证明,Google Closure编译器在构建过程中用于合并/缩小 Javascript 代码。解决方案是删除 Google closure编译器,而是使用 require.js的优化器(r.js)来合并 js 文件。