不匹配的匿名定义()模块不匹配的匿名定义()模块(Mismatched anonymous defi

2019-05-06 11:15发布

当我浏览我的我得到这个错误的webapp的第一次(与禁用缓存的浏览器通常情况下)。

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

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的问题页面吧

Answer 1:

就像AlienWebguy说,每文档, require.js可以炸毁如果

  • 您有一个匿名的定义(“ 调用定义()有没有字符串ID模块 ”)在其自己的脚本标签(其实我认为他们的意思是在全球范围内的任何地方)
  • 你必须有冲突的名字模块
  • 您可以使用加载器插件或匿名的模块,但不使用require.js的优化捆绑他们

而包括browserify一起require.js模块内置捆绑我有这个问题。 解决的办法是要么:

A.加载脚本标记非require.js独立捆装载require.js 之前 ,或

B.加载它们使用require.js(而不是一个脚本标记)



Answer 2:

我有这个错误,因为我包含在requirejs文件连同其他librairies直接在脚本标记包括在内。 这些librairies(如lodash)使用的定义与所需要的定义冲突的功能。 该requirejs文件异步加载,所以我怀疑是需要的定义定义的其他库定义后,因此发生冲突。

为了摆脱错误的,包括通过使用requirejs所有其他js文件。



Answer 3:

按照文档 :

如果您手工编码的HTML脚本标记加载脚本使用匿名定义()调用,可能会出现此错误。

也看到了,如果你手工编码的HTML脚本标记加载有几个名为模块的脚本,但随后尝试加载结束有相同的名字在剧本命名模块由手动加载的一个匿名模块编码的脚本。

最后,如果你使用的装载机插件或匿名模块(模块调用定义(),没有串号),但不使用RequireJS优化的文件结合起来,就会出现这种错误。 优化器知道如何正确地命名匿名模块,这样他们可以在一个优化的文件中的其他模块组合。

为了避免错误:

  • 一定要加载调用定义()通过RequireJS API的所有脚本。 不要手动在HTML代码的脚本标签加载已定义的脚本()的调用它们。

  • 如果您手动编写一个HTML脚本标签,以确保它仅包括一个名为模块,并且未加载,将具有相同的名称,在该文件中的一个模块一个模块匿名。

  • 如果问题是使用装载机插件或匿名的模块,但RequireJS优化器不使用文件捆绑,使用RequireJS优化。



Answer 4:

在开始使用reactjs我跑进了问题,作为一个初学者的文档可能也被写在希腊。

我遇到的问题是,大多数的初学者示例使用“匿名定义”时,你应该用一个“字符串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();
});


Answer 5:

要知道,有些浏览器扩展可以将代码添加到页面。 在我来说,我不得不与我的requireJs搞乱了一个“埃米特中的所有文本域”插件。 请确保没有多余的代码beign通过在浏览器中检查其添加到您的文档。



Answer 6:

现有的答案解释这个问题很好,但如果使用或requireJS并不是一件容易的选择,由于遗留代码略哈克解决方法是你的脚本标签之前,请从窗口范围要求,然后恢复它之前后记你的脚本文件,包括。 在我们的项目,这是一个包裹服务器端函数调用的后面,但是有效浏览器看到以下内容:

    <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>

不是最巧妙的,但似乎工作,并节约了大量refractoring的。



Answer 7:

或者你也可以使用这种方法。

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

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

它的作用是将装载require.js后加载脚本



文章来源: Mismatched anonymous define() module