RequireJS

Question

I have two questions.

I am trying to learn RequireJS and use it along with ASP.NET MVC bundling & minification. I am using a separate config file for RequireJS which holds the bundling information. My first problem is how do I pass on the bundle path generated by MVC to the require.config.js file. A clean way to do that will be as 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 I do the above, RequireJS tries to load a non-existing script named bundlePath.js, instead what I want is to load the bundled script which is '/bundles/scripts?v=GZ0QWPB4G0soItEmlsPC6Yp3zftCRVleVTcH3LseMWo1' which contains my modules. So first, my question is how do I pass the bundle URL, as generated by the server, to RequireJS in the require.config.js file without hard-coding the bundle path?

Secondly, the jqueryui module seems to be not loading. I have added the module name in the AMD code in jquery ui min file. How do I make jquery ui work with RequireJS and ASP.NET bundling?

Razvan Dumitru · Accepted Answer

There is a NuGet package RequireJs.NET https://www.nuget.org/packages/RequireJsNet/ which is an implementation of RequireJs for .NET MVC.

RequireJS is an implementation of Asynchronous Module Definition (AMD) that provides all the tools you need to write modular JavaScript. If you are working on a large project with a lot of JavaScript code, many external components and frameworks, RequireJS will help you manage the complexity of dependencies.

You will have access to a configuration file (json) which will look like 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 that you will render RequireJs config into your layout.

@using RequireJsNet

<!DOCTYPE html>
<html>
  <head>
    <!-- head content -->
  </head>
  <body>
    <!-- body content -->

    @Html.RenderRequireJsSetup(new RequireRendererConfiguration
    {
    // the url from where require.js will be loaded
    RequireJsUrl = Url.Content("~/Scripts/Components/RequireJS/require.js"),
    // baseUrl to be passed to require.js, will be used when composing urls for scripts
    BaseUrl = Url.Content("~/Scripts/"),
    // a list of all the configuration files you want to load
    ConfigurationFiles = new[] { "~/RequireJS.json" },
    // root folder for your js controllers, will be used for composing paths to entrypoint
    EntryPointRoot = "~/Scripts/",
    // whether we should load overrides or not, used for autoBundles, disabled on debug mode
    LoadOverrides = !HttpContext.Current.IsDebuggingEnabled,
    // compute the value you want locale to have, used for i18n
    LocaleSelector = html => System.Threading.Thread.CurrentThread.CurrentUICulture.Name.Split('-')[0],
    // instance of IRequireJsLogger
    Logger = null,
    // extensability point for the config object
    ProcessConfig = config => { },
    // extensability point for the options object
    ProcessOptions = options => { },
    // value for urlArgs to be passed to require.js, used for versioning
    UrlArgs = RenderHelper.RenderAppVersion()
    })

  </body>
</html>

For further reading you can access the documentation page: http://requirejsnet.veritech.io/ .

Or the github project (for issues and questions) : https://github.com/vtfuture/RequireJSDotNet

In this package exists a compressor too for bundling and minification (based on YUI compressor).

RequireJS - ASP.NET MVC Bundle Script

Tags:

javascript

asp.net-mvc

bundling-and-minification

MPM

1 Answers

Razvan Dumitru

Recent Activity

Donate For Us