当我尝试通过 requirejs 包含 js 库时出错

Question

我尝试包含一些 js 库，例如 bootstrap、jQuery.ui 等...通过 requirejs方法但是，我遇到了一些错误

这是控制台错误：

Error: Script error for: jquery/jquery-storageapi

http://requirejs.org/docs/errors.html#scripterror

Error: Load timeout for modules: jquery.bootstrap

http://requirejs.org/docs/errors.html#timeout

Error: Script error for: jquery.bootstrap

Nb: 对于 Error: Script error for: jquery/jquery-storageapi 错误请参考第 require.js:166:17 行，第 166 行是：

/**
     * Constructs an error with a pointer to an URL with more information.
     * @param {String} id the error ID that maps to an ID on a web page.
     * @param {String} message human readable error.
     * @param {Error} [err] the original error, if there is one.
     *
     * @returns {Error}
     */
    function makeError(id, msg, err, requireModules) {
        var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id);
        e.requireType = id;
        e.requireModules = requireModules;
        if (err) {
            e.originalError = err;
        }
        return e;
    }

    if (typeof define !== 'undefined') {
        //If a define is already in play via another AMD loader,
        //do not overwrite.
        return;
    }

    if (typeof requirejs !== 'undefined') {
        if (isFunction(requirejs)) {
            //Do not overwrite and existing requirejs instance.
            return;
        }
        cfg = requirejs;
        requirejs = undefined;
    }

我的 requirejs-config.js :

var config = {
    paths: {
        "jquery.bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min",
        "jquery.3": "https://code.jquery.com/jquery-3.3.1.min",
        "jquery.ui": "https://code.jquery.com/ui/1.12.1/jquery-ui.min"
    },
    shim: {
        'jquery.bootstrap': {
            'deps': ['jquery']
        },
        'jquery.3': {
            'deps': ['jquery']
        },
        'jquery.ui': {
            'deps': ['jquery']
        }
    }
};

然后我这样调用我的函数 exemple :

<script type="text/javascript">
    requirejs(['jquery', 'jquery.3'], function (jQuery, jQuery3) {
        jQuery(function ($) {
            $('.js-toggle-menu').click(function(e){
            e.preventDefault();
            $('.mobile-header-nav').slideToggle();
            $(this).toggleClass('open');
            });
        });
    });
</script>

Screenshot

感谢您的帮助。

Answer 1

您的配置没有任何意义，实际上它不应该工作。在 paths 你有这个关联

"jquery.3": "https://code.jquery.com/jquery-3.3.1.min",

然后在您的 shim 中您有：

'jquery.3': {
  'deps': ['jquery']
},

这完全没有意义。您从 https://code.jquery.com/jquery-3.3.1.min 获得的文件是 jQuery，但您正在设置一个 shim，表示 jQuery 依赖于.. .jQuery。什么？？

至少，您需要解决该问题，并使用如下内容：

var config = {
    paths: {
        "jquery.bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min",
        "jquery": "https://code.jquery.com/jquery-3.3.1.min",
        "jquery.ui": "https://code.jquery.com/ui/1.12.1/jquery-ui.min"
    },
    shim: {
        'jquery.ui': {
            'deps': ['jquery']
        }
    }
};

除了修复 jQuery 的配置外，我还删除了 Bootstrap 的 shim。 Bootstrap 3 需要 shim。 Bootstrap 4 检测是否存在 AMD 加载程序并调用 define 将自身注册为正确的模块。

请注意，您还需要下载 popper and make it available to RequireJS so that Bootstrap can work because Bootstrap 4 lists it among its dependencies. If you run into issues getting popper to work, please search this site because it's been discussed 相当多的内容。

我也会将 Boostrap 称为 bootstrap 而不是 jquery.bootstrap，但这是一个偏好问题。

当我尝试通过 requirejs 包含 js 库时出错

Erros when i tried to include js libraries via requirejs

javascript

jquery

requirejs