javascript - single dependency across multiple modules - r.js "the following module share the same URL" - Stac

admin管理员组

文章数量:1405374

I have implemented requirejs across a multipage web application, which works fine but now I am trying to use r.js to create a single file of 'all' the modules except any of the third party libraries and frameworks such as jquery etc...

the broken down build file (build.js) looks like this:

({

baseUrl: "../",
out: "main-v0.1.js", //"charts-v0.1.js",

include: [


    "bi/jquery/jquery.ui.autoplete",
    "bi/jquery/jquery.uibobox",


    "bi/ui/investmentselector"
],

wrap: true,

exclude: [
    'jquery', 'jqueryui', 'jcanvas', 'jqtools', 'prettyphoto', 'cssSandpaper', 'knockout', 'datatables', 'handlebars'
],
preserveLicenseComments: false,
optimize: "none", // "uglify", "uglify2"

paths: {
    handlebars      : 'lib/handlebars',
    /*hb runtime    : 'lib/handlebars.runtime',*/
    jquery          : 'lib/jquery-1.9.1',
    jqueryui        : 'lib/jquery.ui/jquery-ui-1.10.3.min',
    jcanvas         : 'lib/jcanvas.min',
    jqtools         : 'lib/jquery.tools/jquery.tools.min',
    prettyphoto     : 'lib/jquery/jquery.prettyphoto-3.1.5.min',
    BI              : 'bi/BI',
    sliderconnect   : 'bi/charts/slider-connect',
    cssSandpaper    : 'lib/csssandpaper/cssSandpaper',
    csstransform    : 'bi/enhance/csstransform',
    knockout        : 'lib/knockout-2.2.1',
    datatables      : 'lib/jquery/jquery.dataTables',
    // jquery ui widgets
    uibobox      : 'bi/jquery/jquery.uibobox',
    uiautoplete  : 'bi/jquery/jquery.ui.autoplete'
}

})

The jquery.ui.autoplete.js and jquery.uibobox.js files are custom jqueryui widgets without any define() wrapped around them. The module investmentselector.js (broken down) looks like this...

define(['jquery',
    'bi/templates/investmentselector.js',
    'bi/jquery/datatables/investmentselector.js',
    'lib/JSLinq/JSLINQ.js',
    'uibobox', 'uiautoplete'], function ($, tmp, datatables, jsLinq, uibobox, uiautoplete) {

    'use strict';


    var methods = {
        // ... code
    };

    return methods;
});

what I am getting when I run r.js to build the single file named 'main-v0.1.js' is this...

Tracing dependencies for: D:/Files/Trunk/BestInvest.Select.Website/js/build/main
-v0.1.js
Error: Error: Module loading did not plete for: bi/ui/investmentselector, uic
ombobox, uiautoplete
The following modules share the same URL. This could be a misconfiguration if th
at URL only has one anonymous module in it:
D:/Files/Trunk/BestInvest.Select.Website/js/bi/jquery/jquery.ui.autoplete.js:
 uiautoplete, bi/jquery/jquery.ui.autoplete
D:/Files/Trunk/BestInvest.Select.Website/js/bi/jquery/jquery.uibobox.js: uic
ombobox, bi/jquery/jquery.uibobox
    at Function.build.checkForErrors (D:\Files\Trunk\BestInvest.Select.Website\j
s\build\r.js:27237:19)

Any ideas as to what is going on?

FYI the widget code (broken down again) looks like this...

$.widget("bi.bibobox", {
_create: function () {
    // ...code
},
_destroy: function () { }
});

and...

$.widget("bi.biautoplete", {
_create: function () {
    // ...code
},
_destroy: function () { }
});

Any help on this would be greatful, Thanks!

I have implemented requirejs across a multipage web application, which works fine but now I am trying to use r.js to create a single file of 'all' the modules except any of the third party libraries and frameworks such as jquery etc...

the broken down build file (build.js) looks like this:

({

baseUrl: "../",
out: "main-v0.1.js", //"charts-v0.1.js",

include: [


    "bi/jquery/jquery.ui.autoplete",
    "bi/jquery/jquery.ui.bobox",


    "bi/ui/investmentselector"
],

wrap: true,

exclude: [
    'jquery', 'jqueryui', 'jcanvas', 'jqtools', 'prettyphoto', 'cssSandpaper', 'knockout', 'datatables', 'handlebars'
],
preserveLicenseComments: false,
optimize: "none", // "uglify", "uglify2"

paths: {
    handlebars      : 'lib/handlebars',
    /*hb runtime    : 'lib/handlebars.runtime',*/
    jquery          : 'lib/jquery-1.9.1',
    jqueryui        : 'lib/jquery.ui/jquery-ui-1.10.3.min',
    jcanvas         : 'lib/jcanvas.min',
    jqtools         : 'lib/jquery.tools/jquery.tools.min',
    prettyphoto     : 'lib/jquery/jquery.prettyphoto-3.1.5.min',
    BI              : 'bi/BI',
    sliderconnect   : 'bi/charts/slider-connect',
    cssSandpaper    : 'lib/csssandpaper/cssSandpaper',
    csstransform    : 'bi/enhance/csstransform',
    knockout        : 'lib/knockout-2.2.1',
    datatables      : 'lib/jquery/jquery.dataTables',
    // jquery ui widgets
    uibobox      : 'bi/jquery/jquery.ui.bobox',
    uiautoplete  : 'bi/jquery/jquery.ui.autoplete'
}

})

The jquery.ui.autoplete.js and jquery.ui.bobox.js files are custom jqueryui widgets without any define() wrapped around them. The module investmentselector.js (broken down) looks like this...

define(['jquery',
    'bi/templates/investmentselector.js',
    'bi/jquery/datatables/investmentselector.js',
    'lib/JSLinq/JSLINQ.js',
    'uibobox', 'uiautoplete'], function ($, tmp, datatables, jsLinq, uibobox, uiautoplete) {

    'use strict';


    var methods = {
        // ... code
    };

    return methods;
});

what I am getting when I run r.js to build the single file named 'main-v0.1.js' is this...

Tracing dependencies for: D:/Files/Trunk/BestInvest.Select.Website/js/build/main
-v0.1.js
Error: Error: Module loading did not plete for: bi/ui/investmentselector, uic
ombobox, uiautoplete
The following modules share the same URL. This could be a misconfiguration if th
at URL only has one anonymous module in it:
D:/Files/Trunk/BestInvest.Select.Website/js/bi/jquery/jquery.ui.autoplete.js:
 uiautoplete, bi/jquery/jquery.ui.autoplete
D:/Files/Trunk/BestInvest.Select.Website/js/bi/jquery/jquery.ui.bobox.js: uic
ombobox, bi/jquery/jquery.ui.bobox
    at Function.build.checkForErrors (D:\Files\Trunk\BestInvest.Select.Website\j
s\build\r.js:27237:19)

Any ideas as to what is going on?

FYI the widget code (broken down again) looks like this...

$.widget("bi.bibobox", {
_create: function () {
    // ...code
},
_destroy: function () { }
});

and...

$.widget("bi.biautoplete", {
_create: function () {
    // ...code
},
_destroy: function () { }
});

Any help on this would be greatful, Thanks!

• javascript
• requirejs
• r.js

Share Improve this question Follow asked Mar 21, 2014 at 15:03 quintonquinton 43911 gold badge88 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Your include option uses the full paths to your module instead of using the abbreviated names you've established in paths. Use the names you have in paths:

include: [
    "uibobox",
    "uiautoplete",
    "bi/ui/investmentselector"
]

I've not seen another name defined for the last one so I've left it as-is. Generally, you don't want to have something like foo: "path/to/foo" in your paths and sometimes use foo sometimes path/to/foo when referring to the module in dependencies. You always want to use foo, everywhere. Here, r.js sees uibobox (to take one example) and resolves its path through paths. It sees "bi/jquery/jquery.ui.bobox" in include and resolves it by just adding the .js and it points to the same file as the first case. Then it realizes that it has two modules pointing to the same file and can't process the file because ultimately the file needs to be associated with just one module.

I also notice that your define call lists some of the dependencies with the .js extension. This goes against the remended practice of not specifying the extension. And having sometimes the extension, sometimes not, could cause issues like what I've explained above.

本文标签：