RequireJS - ASP.NET MVC捆绑脚本 [英] RequireJS - ASP.NET MVC Bundle Script

问题描述

我有两个问题。

我正在尝试学习RequireJS并将其与ASP.NET MVC捆绑和使用它一起使用。缩小。我正在为RequireJS使用一个单独的配置文件来保存捆绑信息。我的第一个问题是如何将MVC生成的包路径传递给require.config.js文件。一个干净的方法如下：

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

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

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']
    }
  }
};

当我执行上述操作时，RequireJS会尝试加载名为bundlePath.js的不存在的脚本，而不是我想要的是加载包含我的模块的捆绑脚本'/ bundles / scripts？v = GZ0QWPB4G0soItEmlsPC6Yp3zftCRVleVTcH3LseMWo1'。首先，我的问题是如何在不对包路径进行硬编码的情况下，将服务器生成的包URL传递给require.config.js文件中的RequireJS？

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?

其次，jqueryui模块似乎没有加载。我在jquery ui min文件中的AMD代码中添加了模块名称。如何让jquery ui与RequireJS和ASP.NET捆绑一起工作？

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?

推荐答案

有一个NuGet包RequireJs.NET https://www.nuget.org/packages/RequireJsNet/ 这是RequireJs的实现。 NET MVC。

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

RequireJS是异步模块定义（AMD）的一种实现，它提供了编写模块化JavaScript所需的所有工具。如果您正在处理包含大量JavaScript代码，许多外部组件和框架的大型项目，RequireJS将帮助您管理依赖项的复杂性。

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.

您将有权访问到配置文件（json），如下所示：

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"
                }
            ]
        }
    }
}

之后你会将RequireJs配置渲染到你的布局中。

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>

如需进一步阅读，您可以访问文档页面： http://requirejsnet.veritech.io/ 。

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

或github项目（针对问题和疑问） ）： https://github.com/vtfuture/RequireJSDotNet

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

在这个软件包中也存在一个压缩器，用于捆绑和缩小（基于YUI压缩器）。

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

这篇关于RequireJS - ASP.NET MVC捆绑脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！