Question

AS-萨拉姆-alikum

我的配置如下

requirejs.config({
    baseUrl: "assets/js/",
    paths: {
        "jq"        : "lib/jquery/jquery",
        "jqui"      : "lib/jquery/jquery-ui-1.10.4",
        "jl"        : "lib/jquery/jquery.jlayout",
        "jlb"       : "lib/jquery/jlayout.border",
        "jqs"       : "lib/jquery/jquery.sizes",
        "bb"        : "lib/marionette/backbone",
        "js2"       : "lib/json2/json2",
        "bbr"       : "lib/marionette/backbone.radio",
        "mt"        : "lib/marionette/backbone.marionette",
        "tk"        : "lib/marionette/marionette.toolkit",
        "us"        : "lib/underscore/underscore",
        "tpl"       : "lib/tpl/tpl"
    },
    waitSeconds: 20,
    shim: {
                "jqui":{
                        deps: ['jq']
                },
                "jl":{
                        deps: ['jq']
                },
                "jqs":{
                        deps: ['jq']
                },
                "jlb":{
                        deps: ['jq']
                },
        "us": {
            exports: "_"
        },
        "bb": {
            exports: ["Backbone"],
            deps: ['jq','us','js2']
        },
        "bbr":{
            exports: ["Radio"],
            deps: ["bb"]
        },
        "mt": {
            exports: "Marionette",
            deps: ["bb","bbr"]
        },
        "tk": {
            exports: "Toolkit",
            deps: ["mt"]
        }
    },
    deps: ['app/main']
});

app / main如下

define([
                "require",
                "jq",
                "jqui",
                "jqs",
                "jlb",
                "jl",
                "app/blogapp/bap"
                ], 
                function(
                        require,
                        $,
                        jLayout,
                        bap
                        ){  
                            'use strict';
                            jQuery(function($) {
                                var container = $('.layout');

                                function layout() {
                                    container.layout({
                                        resize: false,
                                        type: 'border',
                                        vgap: 8,
                                        hgap: 8
                                    });
                                };

                                $('.east').resizable({
                                    handles: 'w',
                                    stop: layout,
                                    resize: layout
                                });

                                $('.west').resizable({
                                    handles: 'e',
                                    stop: layout,
                                    resize: layout
                                });

                                $(window).resize(layout);

                                layout();
                                layout();
                            });
                            var BlogApp = require("app/blogapp/bap");
                            var blog = BlogApp.createApp();
                            blog.start(options);
                        },
                function(
                            err
                        ){
                            //The errback, error callback
                            //The error has a list of modules that failed
                            var failedId = err.requireModules && err.requireModules[0];

                            console.log("In err "+failedId);
                                console.log(err);
                        }
);

app / blogapp / bap如下

define(function (
                    require
                ){
                        var tk=require("tk");
                        var bb=require("bb");

                    var ba = tk.App.extend({
                        initialize: function() {},
                    });
                    return ba;
                },
        function(
                    err
                ){
                    //The errback, error callback
                    //The error has a list of modules that failed
                    var failedId = err.requireModules && err.requireModules[0];

                    console.log("In err "+failedId);
                        console.log(err);
                }
);

我收到以下错误

GET file:///C:/Users/Nadvi/Desktop/blog.org/assets/js/backbone.js net::ERR_FILE_NOT_FOUND
req.load @ require.js:2102
load @ require.js:1784
load @ require.js:900
fetch @ require.js:890
check @ require.js:922
enable @ require.js:1246
enable @ require.js:1644
(anonymous) @ require.js:1231
(anonymous) @ require.js:136
each @ require.js:61
enable @ require.js:1183
init @ require.js:851
callGetModule @ require.js:1273
completeLoad @ require.js:1677
onScriptLoad @ require.js:1823
require.js:388 function hasPathFallback(backbone)
require.js:170 Uncaught Error: Script error for "backbone", needed by: bbr
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:170)
    at HTMLScriptElement.onScriptError (require.js:1844)
Uncaught Error: Load timeout for modules: tk,mt
http://requirejs.org/docs/errors.html#timeout
    at makeError (require.js:170)
    at checkLoaded (require.js:743)
    at require.js:769
makeError @ require.js:170
checkLoaded @ require.js:743
(anonymous) @ require.js:769
setTimeout (async)
checkLoaded @ require.js:767
(anonymous) @ require.js:769
setTimeout (async)
checkLoaded @ require.js:767
(anonymous) @ require.js:769
setTimeout (async)
checkLoaded @ require.js:767
(anonymous) @ require.js:769
setTimeout (async)
checkLoaded @ require.js:767
(anonymous) @ require.js:769

这里出了什么问题我无法理解backbone.js路径是怎么回事。请帮帮我。

Zazakallah khair

Nadvi

Answer 1

您需要查看正在使用的库，并检查它们是否将自己注册为AMD模块。这个代码通常如下所示：

  if (typeof define === 'function' && define.amd) {
    define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
      // Export global even in AMD case in case this script is loaded with
      // others that may still expect a global Backbone.
      root.Backbone = factory(root, exports, _, $);
    });

我在这里的那个是从Backbone获取的。你看，Backbone依赖于模块underscore，jquery和exports。 exports模块是RequireJS内部提供的3个内部模块之一。另外两个内部模块是require和module。您不需要为这些内部模块做任何特殊操作：它们始终可用。但是，RequireJS需要能够找到名为underscore和jquery的模块。这是你遇到麻烦的地方。您收到的错误是backbone.radio，也称define，取决于backbone。但是，配置中的任何位置都没有名为backbone的模块。你所拥有的是bb但是"bb" !== "backbone"所以RequireJS在配置中没有看到它，并假设它可以从baseUrl加载而且失败。

另外一个问题是，某些模块，jQuery是最突出的例子，使用硬编码模块名称调用define，如下所示：

define( "jquery", [], function() {

第一个参数是模块名称。大多数情况下，define以依赖项列表作为第一个参数进行调用，并推断出模块名称。但是，传递一个字符串作为第一个参数硬编码模块名称。如果您遇到define这样的调用，您必须通过该硬编码名称引用该模块。您不能只将jq放入paths并将其指向jQuery文件。当RequireJS加载jq时，它会找到一个名为jquery的模块，并会抱怨它们不匹配。

我的推荐是：

检查您要加载的所有内容，并按照我上面的说明检查define来电。
在您的paths配置中，将通常的名称放在这些名称的下面：jquery, backbone, underscore而不是缩写。
删除调用shim的模块的所有define配置。 shim仅适用于未调用define的代码。对调用shim的模块使用define会导致未定义的行为。（充其量会被忽略。）
您可以设置map配置，以便您根据需要在自己的代码中使用缩写。 map执行模块名称替换。例如，在下面的示例中，只要需要名为jq的模块，就会加载jquery。星号表示替换在任何地方都很好。

您的配置应如下所示：

requirejs.config({
    baseUrl: "assets/js/",
    paths: {
        "jquery"          : "lib/jquery/jquery",
        // ...
        "backbone"        : "lib/marionette/backbone",
        "backbone.radio"  : "lib/marionette/backbone.radio",
        "marionette"      : "lib/marionette/backbone.marionette",
        // ...
    },
    map: {
      "*": {
        jq:  "jquery",
        bb:  "backbone",
        bbr: "backbone.radio",
        mt:  "marionette" 
      }
    },
    shim: {
      // whatever shims are appropriate
    }
});

为什么RequireJS会忽略我的“路径”配置？

1 个答案: