javascript - RequireJS - 在需求流和内联中加载 AMD 模块

Question

考虑一下:

<script src='global.js'></script>
<script src='require.js'></script>
<script>
require(['modular_foo'], function() {
  //do stuff
});

...在 global.js 方面，我们有:

//global.js
$.getScript("modular_bar.js");

其中 modular_foo 和 modular_bar 都是匿名定义的 AMD 模块。使用 requireJS，加载类似上面的东西会给你我们最喜欢的错误，mismatched anonymous define() modules .

关于为什么会发生错误已经足够了(如果您想知道，请阅读该页面)，但问题是，如果您无法摆脱这种情况怎么办？

我在一个已建立的平台上工作，该平台正在逐渐迁移到 RJS 流程，目前没有办法同时使用内联遗留脚本(其中一些具有 AMD 检查以触发 define())和我们的 requireJS 条目-同时点。

在某些情况下，我可以简单地将内联 AMD 兼容脚本放置在加载 require.js 库之上，但是当您需要根据 DOM 内容异步加载其他内容 (modular_bar.js) 时，这不起作用。我也可以只注释掉那些从外部加载到 RJS 的文件的所有 AMD 检查，但这可以防止它们与在模块化流程中加载的不兼容。

有没有人有过类似的经历？您如何混合流来克服这些类型的冲突？

Answer 1

我没有在生产环境中使用此解决方案的经验，但我在这个问题上花了几天时间来找出解决它的最佳方法。

如果通过 eval 传递，您可以使用不允许匿名 define 执行的修改后的 RequireJS 库.此外，您可以通过删除下面代码段中 name 上的字符串类型检查来禁止任何 define 调用。

以下代码段是对 RequireJS 的修改，如果被 eval 调用，它将忽略匿名定义。您可以找到 fully modified require.js in this GitHub Gist .

代码依赖于parse-stack library .如果您不能在 RequireJS 之前包含库，我建议将它连接到文件的顶部。

Demo

// This is a snippet of RequireJS
// ...
define = function (name, deps, callback) {
    var node, context;

    // We will allow named modules to be defined by `eval`
    if (!(typeof name == 'string' || name instanceof String))
    {
        var stack = parseStack(new Error());

        // If we find any eval in the stack, do not define the module
        // This is to avoid the "Mismatched anonymous define() module" error
        // Caused by executing an anonymous define without requireJS
        for(var i = 0; i < stack.length; i++)
        {
            if(stack[i].name == "eval")
            {
                return;
            }
        }
    }

    // ...