RequireJS 加载依赖不一致答案

【问题标题】：RequireJS loading dependencies inconsistentlyRequireJS 加载依赖不一致
【发布时间】：2014-01-10 17:40:20
【问题描述】：

我有一个 jQuery 插件，它依赖于首先加载的 jQuery。我使用shim 和require([]) 来确保首先加载jQuery。有时该应用程序可以工作，但通常它不会并给我以下错误：

Uncaught TypeError: Object [object Object] has no method 'noUiSlider'

...这表示 jQuery 没有被首先加载。我做错了什么？

这是我的应用程序的主脚本：

requirejs.config({
    "baseUrl": "app/",
    "paths": {
        "app": "./app",
        "threejs" : "../lib/three.min",
        "jquery" : "../lib/jquery",
        "jquery.nouislider.min": "../lib/jquery.nouislider.min"
    },
    "shim": {
        "jquery.nouislider.min": {
            deps: ["jquery"],
            init: function($) {
                return this;
            }
        }
    }
});

require([
    "jquery",
    "jquery.nouislider.min",
    "threejs",
    "Scene"
],
function ($) {
    var glScene = new Scene();
    glScene.clockStart();

    $(function(){
        var slider = $("<div></div>");
        slider.attr("id", "sample-minimal");
        $("body").append(slider);
        $("#sample-minimal").noUiSlider({
             range: [0, 100]
            ,start: [20, 80]
            ,connect: true
        });
    });

    function onWindowResize(event) {
        glScene.windowResize();
    }
});

【问题讨论】：

标签： javascript jquery jquery-plugins requirejs

【解决方案1】：

您为什么认为，您提供的那个错误表明 jQuery 没有首先加载？事实证明，$(function(){ 正常工作不是相反吗？

不管怎样，试试这个：

requirejs.config({
    "baseUrl": "app/",
    "paths": {
        "app": "./app",
        "threejs" : "../lib/three.min",
        "jquery" : "../lib/jquery",
        "jquery.nouislider.min": "../lib/jquery.nouislider.min"
    },
    "shim": {
        "jquery.nouislider.min": {
            deps: ["jquery"],
            exports: '$'
        }
    }
});

require([
    "jquery.nouislider.min",
    "threejs",
    "Scene"
],
function ($) {
    var glScene = new Scene();
    glScene.clockStart();

    $(function(){
        var slider = $("<div></div>");
        slider.attr("id", "sample-minimal");
        $("body").append(slider);
        $("#sample-minimal").noUiSlider({
             range: [0, 100]
            ,start: [20, 80]
            ,connect: true
        });
    });

    function onWindowResize(event) {
        glScene.windowResize();
    }
});

更新 1：基本示例：

index.html

<!doctype html>
<html>
    <head>
        <link href="./jquery.nouislider.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="stage"></div>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

main.js

require.config({
    paths : {
        jquery : 'jquery-2.0.3',
        'jquery.nouislider' : 'jquery.nouislider'
    },
    shim : {
        'jquery.nouislider' : {deps : ['jquery'], exports : '$'}
    }
});

require(['jquery.nouislider'], function($) {
    $(function(){
        $("#stage").noUiSlider({
             range: [0, 100]
            ,start: [20, 80]
            ,connect: true
        });
    });
});

更新 2：优先选项：

另外，您可能需要使用优先选项：

优先级：要立即加载的模块/文件名数组，之前追踪任何其他依赖项。这允许您设置一个小的一组并行下载的文件，其中包含大部分模块及其依赖项已内置。更多信息是在优化常见问题解答中，优先下载。注意：资源加载由加载器插件（如 'text!template.html'）不能在优先级数组：优先级机制仅适用于常规 JavaScript 资源。

应该这样使用：

paths : {
   ....
},
shim : {
   ....
},
priority : ['jquery']

【讨论】：

问题不在于 jQuery 根本不加载。问题是插件在 jQuery 加载之前加载。请记住，问题是间歇性的（即，有时有效，有时无效）。
@josh 查看更新的示例。这个很好用。
@AndrewShustariov 我有类似的问题。您介意与 teamviewer 联系以帮助我调试，我可以支付您的时间吗？

【解决方案2】：

您正在使用 RequireJS 1.x。解决方案：升级到 2.x。

您正在使用 1.x 的证据：如果设置 priority 起到了作用（正如您在另一个答案的评论中所写的那样），则证明您使用的是 1.0 版，因为 priority 是 removed from the 2.x series。

此外，shim 是 introduced with 2.x，因此，由于您使用的是 1.x 版本，您的 shim 配置只是被 RequireJS 忽略了。这解释了您遇到的不稳定行为，您的 shim 被忽略了，这意味着 jquery 和 jquery.nouislider.min 可以按任何顺序加载。你的垫片看起来很好。只是被忽略了！

【讨论】：