Question

我有一个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();
    }
});

Answer 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：优先级选项：

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

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

它应该像这样使用：

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

Answer 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版本，因此RequireJS会忽略您的shim配置。这解释了您遇到的不稳定行为，shim被忽略，这意味着jquery和jquery.nouislider.min可以按任意顺序加载。你看到的垫片看起来很好。它被忽略了！

RequireJS加载依赖项不一致

2 个答案: