RequireJS - Script Bundle ASP.NET MV

Ho due domande.RequireJS - Script Bundle ASP.NET MV

Sto cercando di imparare RequireJS e usarlo insieme al bundle ASP.NET MVC & minification. Sto utilizzando un file di configurazione separato per RequireJS che contiene le informazioni di raggruppamento. Il mio primo problema è come passare il percorso del bundle generato da MVC al file require.config.js. Un modo pulito per fare che sarà come di seguito:

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

Quando faccio quanto sopra, RequireJS tenta di caricare un non- script esistente denominato bundlePath.js, invece quello che voglio è caricare lo script in bundle che è '/ bundles/scripts? v = GZ0QWPB4G0soItEmlsPC6Yp3zftCRVleVTcH3LseMWo1' che contiene i miei moduli. Quindi, per prima cosa, la mia domanda è: come posso passare l'URL del bundle, come generato dal server, a RequireJS nel file require.config.js senza codificare il percorso del bundle?

In secondo luogo, il modulo jqueryui sembra non essere caricato. Ho aggiunto il nome del modulo nel codice AMD nel file jquery ui min. Come faccio a far funzionare jquery con RequireJS e il bundle di ASP.NET?

fonte

2015-04-29 MPM

Esiste un pacchetto NuGet RequireJs.NET https://www.nuget.org/packages/RequireJsNet/ che è un'implementazione di RequireJs per .NET MVC.

RequireJS è un'implementazione di Asynchronous Module Definition (AMD) che fornisce tutti gli strumenti necessari per scrivere JavaScript modulare. Se stai lavorando su un progetto di grandi dimensioni con un sacco di codice JavaScript, molti componenti e framework esterni, RequireJS ti aiuterà a gestire la complessità delle dipendenze.

si avrà accesso ad un file di configurazione (JSON), che sarà simile a questa:

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

E dopo che si renderanno RequireJs config nella 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>

Per ulteriori approfondimenti è possibile accedere alla pagina di documentazione: http://requirejsnet.veritech.io/.

o il progetto github (per le questioni e le domande): https://github.com/vtfuture/RequireJSDotNet

In questo pacchetto esiste un compressore troppo per la legatura e minification (sulla base del compressore YUI).

fonte

2015-06-04 10:20:31

Questo progetto sembra molto interessante –

Invece di bundlePath utilizzare il percorso del pacchetto "/ Script/bundle/script". funzionerà.

fonte

2015-11-03 06:28:43 Naveenk

RequireJS - Script Bundle ASP.NET MV

risposta

Problemi correlati