带有内联 js 的 require.js答案

【问题标题】：require.js with inline js带有内联 js 的 require.js
【发布时间】：2013-08-06 21:19:03
【问题描述】：

我正在开发一个使用 require.js 的网络应用程序。我对应用程序和 requirejs 都很陌生，并且想知道解决我遇到的问题的最佳解决方案是什么。我们一直在 PHP 包含文件中加载带有脚本标签的第三方用户分析/跟踪库。我们不使用 requirejs 来处理这些，因为 php 正在设置一些 js 运行时值。

这是一个这样的块的示例：

<script src="//js.revsci.net/gateway/gw.js?csid=A08723"></script>
<script type="text/javascript">
    <?php
        global $base_url;
        $host = parse_url( $base_url, PHP_URL_HOST );
    ?>
    if( typeof DM_cat != 'undefined' ) {
        DM_cat('Track');
        DM_tag();
    }
</script>

现在我同意，像这样结合 js 和 php 并不理想，但是所有的分析代码都是这样编写的，而且还有很多。我没有时间（或知识）以 requirejs 的方式重构它，所以我暂时坚持使用这种结构。现在，我被要求将这些第三方脚本设为“异步”或“延迟”。如果可能的话，我更喜欢异步，但两者都是可以接受的解决方案。所以我想改变这个：

<script src="//js.revsci.net/gateway/gw.js?csid=A08723"></script>

到这里：

<script src="//js.revsci.net/gateway/gw.js?csid=A08723" defer></script>

我的问题是，如何使用 Require 加载第三方脚本并防止内联 javascript 块在脚本加载之前执行？从我尝试编写的代码中，我不断收到“不匹配的匿名定义（）模块”错误。我已经阅读了错误，但我无法理解它。即使我粘贴了一个基本示例，我也会不断收到该错误。例如，我什至无法让这个测试代码工作：

define(["testcode"], function(testcode){
  window.foo = "bar";
});

define(["foo"], function(){
  alert(window.foo);  // "bar"
});

错误信息：

Uncaught Error: Mismatched anonymous define() module: function
(testcode){   window.foo = "bar"; }

我不明白这个错误，谁能帮我指出正确的方向？提前致谢！

【问题讨论】：

标签： requirejs web-analytics

【解决方案1】：

迟到了，但这个错误是由于在一个文件中有 2 个定义语句而没有命名它们。这是区分您在单个文件中声明的两个模块所必需的。您需要像这样添加一个名称参数：

define('Name1', ["testcode"], function(testcode){
  window.foo = "bar";
});

define('Name2', ["foo"], function(){
  alert(window.foo);  // "bar"
});

看到这两个： - Documentation - Related Stackoverflow Article

【讨论】：

是的，派对迟到了一年。该网站在 6 个月前被撤下，哈哈。

【解决方案2】：

nopuck4you 建议您将模块名称添加为define 调用的第一个参数。如果这些模块是在 HTML 中的 <script> 标记内创建的，那么没关系。这是罕见的例外之一，您可以将模块名称作为define 的第一个参数。实际上，在这种情况下，您必须为模块命名，否则 RequireJS 无法找到它们。所以你有：

<script>
define("foo", ["testcode"], function(testcode){
  window.foo = "bar";
});

define("test", ["foo"], function(){
  alert(window.foo);  // "bar"
});
</script>

（我假设第二个模块依赖于第一个模块并相应地命名。我不知道testcode 是什么，所以我保持原样。）

但是，一般情况下，您不应通过将名称放在 define 调用中来为模块命名。 RequireJS 文档对此非常清楚。如果您确实在 define 中命名您的模块，这可能会由于 RequireJS 的工作方式而导致问题。事情不会起作用，或者它们不会起作用除非你解决了这个问题。例如，如果您将模块 foo 和 bar 放入 foo.js 并将它们的名称作为 define 的第一个参数，那么 RequireJS 不会有任何问题来确定模块 foo 在 foo.js 但是它不会马上知道bar 是foo.js 中的也是。 根据你加载模块的顺序，你可能需要额外的配置告诉 RequireJS bar 在foo.js 中。

将模块名称放在define 调用中只会导致失败、意外、并发症等。不要这样做。留下名字，让 RequireJS 弄清楚。然后，当你优化的时候，让r.js把名字放进去。

注意：您可能已经看到来自第 3 方的一些代码，这些代码将模块名称直接放入 define。 jQuery 是一个突出的例子。我上面所说的也有例外，但如果你不能清楚地说明为什么需要输入这个名字，那么你就不需要这样做。（事实上，查看 jQuery 案例，我认为没有充分的理由将名称放在 define 那里，我认为他们犯了错误。）

【讨论】：