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