29 votes

Regroupement et réduction de JavaScript modulaire (RequireJS / AMD) avec ASP.NET MVC

Quelqu'un a-t-il de l'expérience ou connaît-il de bonnes solutions pour regrouper et réduire le JavaScript modulaire comme RequireJS / AMD dans un projet ASP.NET MVC ?

La meilleure façon d'utiliser le Optimiseur de RequireJS (peut-être dans une action post-construction ?) -- ou existe-t-il quelque chose de mieux pour ASP.NET MVC ?

11voto

Jeff Shepler Points 412

Je pense que le problème que vous rencontrerez sera si vous utilisez des définitions anonymes. Si vous voulez un fichier combiné/assemblé script qui contient toutes vos définitions, vous devrez les nommer.

eg.

define("someModule", ["jquery", "ko"], function($,ko) { ... });

au lieu de

define(["jquery", "ko"], function($,ko) { ... });

Si vous utilisez les noms de fichiers comme noms de modules, vous pourrez les charger de manière asynchrone (non groupés) ainsi que préchargés (groupés). Ainsi, vous pouvez travailler en mode débogage et en mode version sans avoir à modifier vos exigences.

Je n'ai aucune expérience avec l'optimiseur RequireJS pour savoir s'il prend en charge les définitions anonymes ou non.

UPDATE :

J'ai récemment eu à le faire et l'un des problèmes que j'ai rencontré était l'attribut data-main de la balise script chargeant require.js. Comme le fichier main.js avait des dépendances sur les modules groupés, ils doivent être chargés avant main.js mais après require.js. J'ai donc dû abandonner data-main et charger ce fichier (dégroupé) en dernier.

de

<script src="../JS/require-v2.1.2.js" type="text/javascript" data-main="main.js"></script>

à

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

Je n'ai pas regardé, mais si la configuration du bundle pouvait assurer que main.js est le dernier, alors il n'y aurait même pas besoin de cette dernière balise script.

1voto

zacharydl Points 1294

Ce sont les étapes pour obtenir RequireJS groupé avec main.js. Vous pouvez descendre à une ligne dans le fichier <head> étiquette. Cela ne règle pas le problème des définitions anonymes.

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"));
   }
}

main.js doit fonctionner sans données principales (j'avais besoin de définir baseUrl)

require.config({
    baseUrl: "scripts"
});

0voto

Travis Points 709

Si vous recherchez une solution plus fluide, consultez Microsoft Ajax Minifier : http://ajaxmin.codeplex.com/

Cependant, il existe des alternatives. C'est une bonne réponse de l'OS : http://stackoverflow.com/a/28954/897559

Le compilateur Closure de Google fonctionne bien, mais il est vraiment optimisé pour le code qui utilise la fonction bibliothèque Closure et le style syntaxique associé : https://developers.google.com/closure/compiler/

Le compresseur YUI a été utilisé pendant un bon moment avec de bons résultats : http://developer.yahoo.com/yui/compressor/

Puis il y a la version JSMin de Crockford : http://www.crockford.com/javascript/jsmin.html

Et UglifyJS : https://github.com/mishoo/UglifyJS/

Avec tout cela, si vous avez besoin d'une assistance dans le processus de construction, vous pouvez consulter ANT : http://ant.apache.org/

0voto

McKay Points 7281

Je ne sais pas si c'est une solution acceptable ou non, mais Visual Studio 2012 dispose d'un paquet NuGet (Microsoft.Web.Optimization) qui prend en charge la minification et le regroupement en mode natif. Je ne suis pas sûr qu'il soit disponible pour 2010.

C'est une ligne de code dans application_start

Microsoft.Web.Optimization.BundleTable.Bundles.EnableDefaultBundles();

http://msdn.microsoft.com/en-us/vs11trainingcourse_aspnetandvisualstudio_topic5

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X