Le regroupement et les minifying modulaire JavaScript (RequireJS / AMD) avec ASP.NET MVC

Quelqu'un a une expérience avec ou connaissez toutes les bonnes solutions pour le groupage et les minifying modulaire JavaScript comme RequireJS /AMD dans un ASP.NET projet MVC?

Est la meilleure façon d'utiliser le L'optimiseur de RequireJS (peut-être dans un post-construction de l'action?) - ou est-il quelque chose de mieux là-bas pour ASP.NET MVC?

  • Depuis l'AMD approche s'appuie fortement sur les scripts de chargement d'autres scripts, je crois que votre meilleur pari est de rapetisser chaque script de façon autonome (sans regroupement) ou, en effet, l'utilisation de l'optimiseur de RequireJS qui essaie de détecter le module d'inclusions et les regrouper en conséquence.
InformationsquelleAutor kendaleiv | 2012-07-20
  1. 13

    Je pense que le problème que vous serez frappé est que si vous avez utilisé anonyme définit. Si vous voulez un combiné/livré fichier de script qui contient tous vos définit, vous aurez à les nommer.

    par exemple.

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

    au lieu de

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

    Si vous utilisez les noms de fichiers comme les noms de module, vous serez capable de les charger de manière asynchrone (non fournis) ainsi que préchargés (fourni). De cette façon, vous pouvez travailler en mode de débogage, ainsi que le mode de diffusion sans avoir à changer votre exige.

    Je n'ai aucune expérience avec les RequireJS optimiseur de savoir si il prend soin de anonyme définit ou non.

    Mise à JOUR:

    J'ai récemment eu à le faire et l'un des problèmes que j'ai rencontré a été de données, le principal attribut de la balise de script de chargement require.js. Depuis le main.js fichier avait dépendances sur le lot de modules, ils ont besoin d'être chargé avant main.js mais après require.js. J'ai donc du fossé de données principale 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 le groupe de configuration pourrait assurer main.js est dernier, alors n'auriez même pas besoin que la dernière balise de script.

    • Vous pouvez obtenir ces trois lignes en bas de l'un par l'aide de BundleConfig.cs, voir ma réponse ci-dessous. Je pense que BundleTables sont nouveaux dans MVC 4.
    InformationsquelleAutor Jeff Shepler
  2. 2

    Ces sont les démarches pour obtenir livré avec RequireJS main.js. Vous pouvez descendre à une seule ligne dans le <head> tag. Ce n'est pas de régler le problème avec anonyme définit.

    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 travailler en l'absence de données principale (j'avais besoin de définir baseUrl)

    require.config({
    baseUrl: "scripts"
});
    • Sauf que vous n'êtes groupement d'autre chose que de la main.js et la require.js, de sorte que toute autre dépendance seront chargés de la même manière qu'avant: fichier par fichier. Il n'est pas efficace, vous ne remarquerez pas la différence dans un monde réel scénario où vous avez beaucoup de dépendances (vous êtes seulement d'économiser de l'1 chargement de fichier).
    • Dans mon scénario, ce qui accélère le chargement initial par juste un peu. Puisque c'est une seule page de l'application, en fait, je veux RequireJS pour charger tout le reste plus tard, un à la fois.
    • ael-vous peut-être raison à la portée étroite de Zach exemple. Mais ce qu'il montre, magnifiquement, je pourrais ajouter, c'est comment vous connecter avec l'un ou plusieurs de vos bundles spécifié dans le pack config. Dans la plupart des cas que j'ai rencontré, je vais créer un bundle pour mes libs externes (jquery, knock-out, etc) et de référence à ceux de la production par le biais de besoin. Je vais poster un exemple ci-dessous.
    InformationsquelleAutor zacharydl
  3. 0

    Je ne suis pas sûr si c'est une solution acceptable ou pas, mais Visual Studio 2012 a un package NuGet (Microsoft.Web.Optimisation) qui prend en charge native de minification et le groupement. Je ne suis pas sûr si elle est 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

    InformationsquelleAutor McKay
  4. 0

    Je sais que c'est une vieille question, mais vous pouvez prendre un coup d'oeil à RequireJS.NET Compresseur (utilise YUI compressor, pas ASP.NET le regroupement, au moins pour le moment) qui fait partie de RequireJS.NET package NuGet.

    Références:

    Compresseur - http://requirejsnet.veritech.io/compressor.html

    Documentation Générale - http://requirejsnet.veritech.io/

    Projet Github - https://github.com/vtfuture/RequireJSDotNet

    NuGet - https://www.nuget.org/packages/RequireJsNet/

    InformationsquelleAutor Razvan Dumitru