9

Mam dwa pytania.RequireJS - Skrypt pakietu ASP.NET MVC

Próbuję nauczyć się RequireJS i używać go wraz z minimalizacją pakietów ASP.NET MVC &. Używam osobnego pliku konfiguracyjnego dla RequireJS, który przechowuje informacje o wiązaniu. Moim pierwszym problemem jest przekazanie ścieżki pakietu wygenerowanej przez MVC do pliku require.config.js. Czysty sposobem na to będzie jak poniżej:

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

Kiedy robię powyższego RequireJS próbuje załadować nie- istniejący skrypt o nazwie bundlePath.js, zamiast tego chcę załadować dołączony skrypt, który zawiera "/ bundles/scripts? v = GZ0QWPB4G0soItEmlsPC6Yp3zftCRVleVTcH3LseMWo1", który zawiera moje moduły. Najpierw pytam: jak przekazać URL pakietu wygenerowany przez serwer do RequireJS w pliku require.config.js bez twardego kodowania ścieżki pakietu?

Po drugie, wydaje się, że moduł jqueryui nie ładuje się. Dodałem nazwę modułu do kodu AMD w pliku jquery ui min. Jak utworzyć jquery ui z pakietowaniem RequireJS i ASP.NET?

Odpowiedz

2

Istnieje pakiet NuGet RequireJs.NET https://www.nuget.org/packages/RequireJsNet/, który jest implementacją RequireJs dla .NET MVC.

RequireJS to implementacja Asynchronous Module Definition (AMD), która zawiera wszystkie narzędzia potrzebne do napisania modułowego JavaScript. Jeśli pracujesz nad dużym projektem z dużą ilością kodu JavaScript, wieloma zewnętrznymi komponentami i frameworkami, RequireJS pomoże ci zarządzać złożonością zależności.

Będziesz miał dostęp do pliku konfiguracyjnego (json), który będzie wyglądać następująco:

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

A potem będzie renderowanie RequireJs config w swoim układzie.

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

Dla dalszego czytania można uzyskać dostęp do strony dokumentacji: http://requirejsnet.veritech.io/.

Albo projekt github (dla zagadnień i pytań): https://github.com/vtfuture/RequireJSDotNet

W tym pakiecie istnieje sprężarki zbyt do wiązania i minifikacji (w oparciu o sprężarki YUI).

+0

Ten projekt wygląda bardzo interesująco –

0

Zamiast bundlePath użyj ścieżki pakietu "/ Scripts/bundles/scripts". to zadziała.