¿Alguien tiene alguna experiencia o sabe alguna buena solución para agrupar y minificar JavaScript modular como RequireJS/AMD en un proyecto ASP.NET MVC?Agrupación y minificación de JavaScript modular (RequireJS/AMD) con ASP.NET MVC
¿Es la mejor manera de usar el RequireJS optimizer (quizás en una acción de compilación posterior?) O hay algo mejor para ASP.NET MVC?
No estoy seguro de si esta es una solución aceptable o no, pero Visual Studio 2012 tiene un paquete NuGet (Microsoft.Web.Optimization) que admite la agrupación y minificación nativa. No estoy seguro de si está disponible para el año 2010
Es una línea de código en Application_Start
Microsoft.Web.Optimization.BundleTable.Bundles.EnableDefaultBundles();
http://msdn.microsoft.com/en-us/vs11trainingcourse_aspnetandvisualstudio_topic5
Ese enlace B/M está obsoleto. Ver mi tutorial B/M http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification – RickAndMSFT
@RickAndMSFT Ah, sí, gracias. – McKay
Creo que el problema es que va a golpear si utilizó define anónimos. Si desea un archivo de script combinado/incluido que contenga todas sus definiciones, tendrá que nombrarlas.
por ejemplo.
define("someModule", ["jquery", "ko"], function($,ko) { ... });
en lugar de
define(["jquery", "ko"], function($,ko) { ... });
Si utiliza los nombres de archivo que los nombres de los módulos, podrás cargarlos de forma asíncrona (no incluido), así como precargado (incluido). De esta forma puede trabajar en modo de depuración y en modo de lanzamiento sin tener que cambiar sus requisitos.
No tengo experiencia con el optimizador RequireJS para saber si se ocupa de las definiciones anónimas o no.
ACTUALIZACIÓN:
recientemente he tenido que hacer esto y uno de los problemas que encontramos fue el atributo de datos principal de las require.js carga etiqueta de script. Como el archivo main.js tenía dependencias en los módulos incluidos, deben cargarse antes de main.js pero después de require.js. Así que tuve que deshacerme de data-main y cargar ese archivo (desagregado) al final.
de
<script src="../JS/require-v2.1.2.js" type="text/javascript" data-main="main.js"></script>
a
<script src="../JS/require-v2.1.2.js" type="text/javascript"></script>
<%: System.Web.Optimization.Scripts.Render("~/bundles/signup") %>
<script src="main.js" type="text/javascript"></script>
No he mirado, pero si la configuración del paquete podría asegurar main.js es pasado, entonces no sería siquiera necesita que la última etiqueta de script.
Puede obtener esas tres líneas a la vez mediante el uso de 'BundleConfig.cs', vea mi respuesta a continuación. Creo que los BundleTables son nuevos en MVC 4. – zacharydl
Estos son los pasos para obtener RequireJS incluido con main.js. Puede acceder a una línea en la etiqueta <head>. Esto no resuelve el problema con definiciones anónimas.
HTML
<head runat="server">
<title></title>
<%: System.Web.Optimization.Scripts.Render("~/bundles/scripts") %>
</head>
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
"~/scripts/libs/require.js",
"~/scripts/main.js"));
}
}
principal.js deben trabajar without data-main (necesitaba para establecer baseUrl)
require.config({
baseUrl: "scripts"
});
Excepto que no está agrupando nada más que el main.js y el require.js, por lo que cualquier otra dependencia se cargará de la misma manera que antes: archivo por archivo. No es efectivo, no notarás una diferencia en un escenario del mundo real donde tienes muchas dependencias (solo estás ahorrando 1 carga de archivos). –
En mi situación, esto acelera la carga inicial en solo un poco. Como es una aplicación de una sola página, en realidad quiero que RequireJS cargue todo lo demás más tarde, de a uno por vez. – zacharydl
@myka eyl - es posible que tenga razón en el alcance limitado del ejemplo de Zach. Pero lo que demuestra, bellamente podría agregar, es cómo se necesita un cable con uno o varios de los paquetes especificados en la configuración del paquete. En la mayoría de los casos que he encontrado, crearé un paquete para mis libs externas (jquery, knockout, etc.) y haré referencia a aquellos en producción a través de require. Voy a publicar un ejemplo a continuación. – pimbrouwers
Sé que esto es una cuestión de edad, pero se puede echar un vistazo a RequireJS.NET Compresor (usa YUI compresor, no paquetización ASP.NET - al menos por el momento) que es parte del paquete RequireJS.NET NuGet.
Referencias:
Compresor - http://requirejsnet.veritech.io/compressor.html
general Documentación - http://requirejsnet.veritech.io/
Proyecto Github - https://github.com/vtfuture/RequireJSDotNet
Desde el enfoque de AMD se basa principalmente en las secuencias de comandos cargar otros guiones , Creo que tu mejor apuesta es ya sea minify cada script de forma independiente (sin empaquetar) o, de hecho, use el optimizador RequireJS que intenta detectar inclusiones de módulo y agrupar en consecuencia. – Avish