javascript - RequireJS - ASP.NET MVC Bundle Script - Stack Overflow

admin管理员组

文章数量:1330084

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?

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?

• javascript
• asp-mvc
• requirejs
• bundling-and-minification

Share Improve this question Follow edited Jul 6, 2015 at 23:03 abatishchev 100k8888 gold badges301301 silver badges442442 bronze badges asked Apr 29, 2015 at 11:26 MPMMPM 16111 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

There is a NuGet package RequireJs.NET https://www.nuget/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 ponents and frameworks, RequireJS will help you manage the plexity 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 posing 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 posing paths to entrypoint
    EntryPointRoot = "~/Scripts/",
    // whether we should load overrides or not, used for autoBundles, disabled on debug mode
    LoadOverrides = !HttpContext.Current.IsDebuggingEnabled,
    // pute 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./vtfuture/RequireJSDotNet

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

Instead of bundlePath use the bundle path "/Scripts/bundles/scripts" . it'll work.

An old question but you can use @Scripts.RenderFormat() to get MVC to output the filename of the bundle on it's own. e.g.

Bundle

bundles.Add(new ScriptBundle("~/bundles/bundleName").Include(
                "~/Scripts/filename1.js",
                "~/Scripts/filename2.js",
                "~/Scripts/filename3.js"
            ));

View

<script type="javascript">
    var arrayOfFiles = [@Scripts.RenderFormat("\"{0}\",","~/bundles/bundlename")];
</script>

This sets arrayOfFiles to

["/Scripts/filename1.js","/Scripts/filename2.js","/Scripts/filename3.js"]

or if the bundling is enabled you just get

["/bundles/bundleName?v=13232424"]

You can then pass this array to other javascript libraries.

本文标签： javascriptRequireJSASPNET MVC Bundle ScriptStack Overflow