RequireJS - ASP.NET MVC 捆绑脚本

Question

我有两个问题。

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

索引.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>

需要配置文件

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 而不对包路径进行硬编码？

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

Answer 1

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

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

您将可以访问如下所示的配置文件 (json)：

{
    "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 配置呈现到您的布局中。

@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/ 。

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

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

Answer 2

而不是bundlePath使用包路径 "/Scripts/bundles/scripts" 。 它会工作。

Answer 3

一个老问题，但您可以使用 @Scripts.RenderFormat() 来让 MVC 自行输出包的文件名。 例如

捆

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

看法

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

这将 arrayOfFiles 设置为

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

或者如果启用了捆绑，您就可以得到

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

然后，您可以将此数组传递给其他 javascript 库。

RequireJS - ASP.NET MVC 捆绑脚本

问题描述

3 个解决方案

解决方案1
2 2015-06-04 10:20:31

解决方案2
0 2015-11-03 06:28:43

解决方案3
0 2021-02-01 14:59:29

RequireJS - ASP.NET MVC 捆绑脚本

问题描述

3 个解决方案

解决方案1 2 2015-06-04 10:20:31

解决方案2 0 2015-11-03 06:28:43

解决方案3 0 2021-02-01 14:59:29

解决方案1
2 2015-06-04 10:20:31

解决方案2
0 2015-11-03 06:28:43

解决方案3
0 2021-02-01 14:59:29