RequireJS有时无法加载jQuery

RequireJS sometimes fails to load jQuery

本文关键字：加载 jQuery RequireJS      更新时间：2023-09-26

我的项目结构是这样的

root/
  lib/
  js/

在我的js文件夹中，我有一个require-config文件，它引用了lib目录中的javascript文件。像这样:

require.config({
    paths: {
        jquery: ["../lib/jquery/dist/jquery"],
    }
});

像这样在视图中启动:

<script data-main="js/require-config" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
<script>require(["viewModels/searchViewModel"]);</script>

这就是我的searchViewModel看起来像(省略了函数内的代码)，从typescript生成:

define(["require", "exports", "jquery"], function (require, exports, $) {
    "use strict";
    var SearchViewModel = (function () {
        function SearchViewModel() {
        }
        return SearchViewModel;
    }
});

在大多数情况下，找到正确的文件似乎没有问题。偶尔，它会在/js/jquery.js中查找jquery文件，这会导致浏览器对http://localhost/js/jquery.js抛出404。

我在require配置中做错了什么吗?为什么它有时起作用有时不起作用?

不要使用data-main来加载你的RequireJS配置。它间歇性工作的原因是data-main导致RequireJS异步加载命名脚本。因此，当require(["viewModels/searchViewModel"]);执行时，您的配置不一定已经加载。

只有当所有依赖于此配置的代码通过传递给data-main的相同文件加载时，使用data-main加载配置才是安全的。这可能是因为你已经构建了一个包含应用中所有模块和配置的bundle，或者是因为你在配置加载后只使用了deps来加载模块。

你的情况是不安全的，因为你的代码在模块之外，你通过data-main加载，依赖于被加载的配置。

分割script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
<script src="js/require-config.js"></script>
相关文章：