javascript - RequireJS - ASP.NET MVC Bundle Script -
i have 2 questions.
i trying learn requirejs , use along asp.net mvc bundling & minification. using separate config file requirejs holds bundling information. first problem how pass on bundle path generated mvc require.config.js file. clean way below:
index.cshtml
<script id="requirescript" type="text/javascript" src="~/scripts/require.config.js" data-baseurl="@url.content("~/scripts")" data-bundlepath="@system.web.optimization.scripts.url("~/bundles/scripts").tostring()"></script>
require.config.js
var reqscript = document.getelementbyid('requirescript'); var baseurl = reqscript.getattribute('data-baseurl'); var bundlepath = reqscript.getattribute('data-bundlepath'); var require = { baseurl: baseurl, bundles: { bundlepath : ['jquery','jqueryui','mymodule'] } } };
when above, requirejs tries load non-existing script named bundlepath.js, instead want load bundled script '/bundles/scripts?v=gz0qwpb4g0soitemlspc6yp3zftcrvlevtch3lsemwo1' contains modules. first, question how pass bundle url, generated server, requirejs in require.config.js file without hard-coding bundle path?
secondly, jqueryui module seems not loading. have added module name in amd code in jquery ui min file. how make jquery ui work requirejs , asp.net bundling?
there nuget package requirejs.net https://www.nuget.org/packages/requirejsnet/ implementation of requirejs .net mvc.
requirejs implementation of asynchronous module definition (amd) provides tools need write modular javascript. if working on large project lot of javascript code, many external components , frameworks, requirejs manage complexity of dependencies.
you have access configuration file (json) this:
{ "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", "menu-module" : "controllers/common/menu-module" }, "shim": { "jquery-validate": { "deps": [ "jquery" ] }, "jquery-validate-unobtrusive": { "deps": [ "jquery", "jquery-validate" ] }, "bootstrap": { "deps": ["jquery"] } }, "autobundles": { "main-app": { "outputpath": "scripts/bundles/", "include": [ { "directory": "controllers/root" } ] }, "require-plugins": { "outputpath": "scripts/bundles/", "include": [ { "file": "components/requirejs/i18n" }, { "file": "components/requirejs/text" } ] } } }
and after render requirejs config layout.
@using requirejsnet <!doctype html> <html> <head> <!-- head content --> </head> <body> <!-- body content --> @html.renderrequirejssetup(new requirerendererconfiguration { // url require.js loaded requirejsurl = url.content("~/scripts/components/requirejs/require.js"), // baseurl passed require.js, used when composing urls scripts baseurl = url.content("~/scripts/"), // list of configuration files want load configurationfiles = new[] { "~/requirejs.json" }, // root folder js controllers, used composing paths entrypoint entrypointroot = "~/scripts/", // whether should load overrides or not, used autobundles, disabled on debug mode loadoverrides = !httpcontext.current.isdebuggingenabled, // compute value want locale have, used i18n localeselector = html => system.threading.thread.currentthread.currentuiculture.name.split('-')[0], // instance of irequirejslogger logger = null, // extensability point config object processconfig = config => { }, // extensability point options object processoptions = options => { }, // value urlargs passed require.js, used versioning urlargs = renderhelper.renderappversion() }) </body> </html>
for further reading can access documentation page: http://requirejsnet.veritech.io/ .
or github project (for issues , questions) : https://github.com/vtfuture/requirejsdotnet
in package exists compressor bundling , minification (based on yui compressor).
Comments
Post a Comment