vtfuture / RequireJSDotNet

RequireJS for ASP.NET MVC
http://requirejsnet.veritech.io
MIT License
94 stars 46 forks source link

Using single js file containing multiple AMD modules #83

Closed amit-g closed 7 years ago

amit-g commented 7 years ago

I have a working version of Kendo UI with RequireJS.Net and that uses scripts from Kendo UI that were not AMD modules. Now Kendo UI scripts are AMD scripts and they ship individual files as well as bundle that includes all the files. I am running into issues when I am trying to use that. Since those scripts are already AMD, I don't need a shim and to remove other complications, I am simply trying to use the bundle kendo.all.min. Kendo scripts are located in Scripts/2016.2.714 and from one of the controller/action script (say Scripts/Controller/Root/Home/Index.js) I am including it like this

require([
        'jquery',
        'bootstrap',
        'kendo'
], function (menu, $) {
    var indexScript = function () {
    };

    $(function () {
        var entryPoint = new indexScript();
    });
});

and RequireJs.Json has

"paths": {
    "jquery": "jquery-1.10.2",
    "jquery-validate": "jquery.validate",
    "jquery-validate-unobtrusive": "jquery.validate.unobtrusive",
    "bootstrap": "bootstrap",
    "respond": "respond",
    "i18n": "Components/RequireJS/i18n",
    "text": "Components/RequireJS/text",
    "kendo": "Kendo/2016.2.714/kendo.all.min"
},

While building the error is given as

Could not load script C:\Users\MyUserName\documents\visual studio 2013\Projects\WebApplication1\WebApplication1\Scripts\kendo.core.min.js WebApplication1

The Kendo AMD scripts (and bundles) have defined modules as

!function(e,define){define("kendo.core.min",["jquery"],e)}(function()...

To use the kendo as bundle containing multiple modules I added

"bundles": {
    "kendo": ["kendo.core.min", "kendo.data.min", ... <listed all individual files>]
},

That did not help.

Referencing individual files also presents similar challenge as many of the individual files themselves have multiple modules.

The bundle key isn't preserved or rendered to HTML as require.js config. It seems that it is consumed internally only. So it doesn't implement http://requirejs.org/docs/api.html#config-bundles?

amit-g commented 7 years ago

In debug mode one of the configuration works where each of the individual Kendo file is listed individually as paths in the config. While the config is bloated but still workable.

require([
        'jquery',
        'bootstrap',
        'kendo.core.min'
], function (menu, $) {
    var indexScript = function () {
    };

    $(function () {
        var entryPoint = new indexScript();
    });
});
...
...
"kendo.aspnetmvc.min": "ThirdParty/Kendo/2016Q2/kendo.aspnetmvc.min",
"kendo.autocomplete.min": "ThirdParty/Kendo/2016Q2/kendo.autocomplete.min",
"kendo.binder.min": "ThirdParty/Kendo/2016Q2/kendo.binder.min",
"kendo.button.min": "ThirdParty/Kendo/2016Q2/kendo.button.min",
...
...

However the compressor isn't working correctly and the browser throws errors like

Error: Load timeout for modules: bootstrap,jquery-serialize
http://requirejs.org/docs/errors.html#timeout

which itself has nothing to do with bootstrap or any other lib. The bundle created isn't correct. The override RequireJS.json file also isn't correct as it lists only a few of the kendo files to the list of bundle. The rest are served directly using individual files.

"thirdparty/kendo/2016q2/kendo.core.min": "scripts/bundles/main-app",
"thirdparty/kendo/2016q2/kendo.maskedtextbox.min": "scripts/bundles/main-app",
"thirdparty/kendo/2016q2/kendo.calendar.min": "scripts/bundles/main-app",
"thirdparty/kendo/2016q2/kendo.popup.min": "scripts/bundles/main-app"
gregveres commented 7 years ago

Hi @amit-g

I can't comment on the bundling since I can't get it working properly.

But it looks like you are requiring kendo wrong. In your require statement you are using the path but I think it should only be the module name.

Since you said that kendo defines it as kendo.core.min I think you need to use the name kendo.core.min in your require line.

And then I would also use kendo.core.min as the name portion of the path config.

This should define a module that is properly called kendo.core.min that is locatableby requireJS through its config file.

Hope that helps.

amit-g commented 7 years ago

@gregveres thanks for the comment. I have updated the comments to reflect what currently works. As I mentioned earlier, the non-bundled mode works with bloated config. The bundel doesn't. It is broken. We went back to version 2.1.36.0 which helps. It still doesn't bundle all the files though.

HRasch commented 7 years ago

I also struggle with this problem. Kendo uses named modules, but don't reference them relative anymore. If you config the paths you override the location of the module, so it can be found. There's also a thread in the telerik forum about this problem: http://www.telerik.com/forums/issues-loading-latest-kendo-version-using-requirejs

aquamoth commented 7 years ago

Ive rewritten most of the path handling in the autobundler and my PR was just accepted to master.

Can you guys test if your configs work/ work better with the latest version, and Ill rry to fix any bugs you find?

aquamoth commented 7 years ago

Closing due to no response. Please reopen if not working as expected.