require.js加载依赖项不正确

require.js loads dependencies incorrectly

本文关键字：不正确 依赖 加载 js require      更新时间：2023-09-26

这就是设置，我的基本文件是main.js，它定义了我正在构建的网站的所有页面上所需的脚本。它看起来像这样：

define([
        '/javascript/requirePlugins/require-order.js!http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
        '/javascript/requirePlugins/require-order.js!/javascript/jquery-global-plugins.js',
        '/javascript/requirePlugins/require-order.js!/javascript/globals.js'
    ], function () {
        loadFonts();
    }
);

它加载jQuery、一些插件和globals脚本文件。在一个页面上，我试图加载一个jQuery插件，但该插件试图在加载jQuery之前加载。它看起来像这样：

    require(['/javascript/requirePlugins/require-order.js!/main','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

该函数似乎没有按照请求的顺序执行。我甚至不确定我是否可以嵌套这样的有序函数。我也尝试过将jQuery作为依赖项应用，但这也失败了：

    require(['/javascript/requirePlugins/require-order.js!/jquery','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

感谢

订单插件被删除，您可以尝试shim-config按顺序加载插件

requirejs.config({
   paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
        'bootstrap': '../bootstrap/js/bootstrap.min',
        'select2': 'vendor/select2',
        'jshashtable': 'vendor/jshashtable-2.1',
        'jquery.numberformatter': 'vendor/jquery.numberformatter-1.2.3.min',
        'jq-datepicker': 'vendor/bootstrap-datepicker',
        'jq-datepicker.da': 'vendor/bootstrap-datepicker.da'
    }, 
    // Use shim for plugins that does not support ADM
    shim: {
        'bootstrap': ['jquery'],
        'select2': ['jquery'],
        'jq-datepicker': ['jquery'],
        'jshashtable': ['jquery'],
        'jquery.numberformatter': ['jquery', 'jshashtable']
    },
    enforceDefine: true
});

编辑：

requirejquery也不再进行维护。

如果您只需要按顺序加载一些顶层脚本，并且这些脚本不使用requirejs支持的模块API，那么订单插件非常有用。如果您将其混合/用于加载使用define（）模块API的模块，则效果不会很好。

特别是，order只是确保首先加载脚本。然而，define（）API指定要加载的其他脚本，订单插件不知道要等待这些脚本加载。

对于这个特殊的问题，我建议使用require-jquery.js作为sinsedrix的建议。或者包装您在define（）调用中使用的脚本。volo可以用它的amdify命令帮助你做到这一点：

volo.js amdify path/to/lemon-slider-0.2.js depends=jquery

此外，我会设置baseUrl，并对依赖项使用"模块命名"，而不是完整路径。这将允许优化器正常工作。您还可以将"order"映射到requirePlugins路径，这有助于减少一些线路噪声。我还将创建一个"jquery"路径条目，这样，如果您在define调用中包装其他插件，它将映射回加载在main.js文件中的jquery。因此，在页面的顶级脚本中：

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        order: 'requirePlugins/require-order',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
    }
});

然后你的main.js可以这样写：

define([
        'order!jquery',
        'order!jquery-global-plugins',
        'order!globals'
    ], function () {
        loadFonts();
    }
);

请注意，在这里，只要这些依赖项本身不调用define（），订单的使用是可以的。

但是，如果您正在包装您在define调用中使用的脚本，那么您可以取消顺序！上面的用法。不过，请保持jquery路径的配置。

也许您应该尝试使用require jquery：http://requirejs.org/docs/jquery.html

这样您就不必担心jquery何时加载。

相关文章：