Je me suis récemment livré à l'exercice consistant à configurer RequrieJS avec l'optimisation automatique de la construction dans une application ASP.NET MVC. Il existe de nombreux articles de blog utiles, comme celui de Simon, qui constituent une excellente référence. D'un point de vue ASP.NET, l'un des plus utiles que j'ai trouvé en termes de configuration de l'optimiseur RequireJS pour les applications ASP.NET multi-pages est le suivant Faire en sorte que RequireJS soit compatible avec ASP.NET MVC .
En utilisant les excellentes informations déjà disponibles, j'ai créé mon propre site web. ASP.NET MVC RequireJS exemple sur GitHub . Une grande partie de ce qui est inclus est similaire à des exemples déjà existants, cependant pour aborder la question des vues partielles, et des dépendances de besoin multi-pages, j'ai adopté une approche légèrement différente.
_Layout.cshtml
La différence la plus notable par rapport aux exemples existants réside dans la création d'une RequireViewPage qui expose les méthodes pour passer les données de configuration à RequrieJS ainsi que les dépendances requises spécifiques à la page de référence.
Ainsi, votre _Layout.cshtml ressemblera beaucoup à ce que vous attendez avec :
<head>
...
@RenderModuleConfig()
<script type="text/javascript" src="@Url.Script("vendor/require.js")" data-main="main"></script>
</head>
<body>
...
Vues et partielles
Pour câbler les vues (et dans mon cas les modèles de vues knockout), un fragment de script supplémentaire a été ajouté au bas de _Layout.cshtml comme suit
...
@RenderSection("scripts", required: false)
<script type="text/javascript">require(['main'], function () { require(['lib/knockout/knockout.require']); });</script>
</body>
Cela garantira que pour toute dépendance de vue, le module principal a été chargé (en supposant que les dépendances pour main ont été définies dans le fichier main.js et permet ensuite aux dépendances spécifiques à la vue d'être câblées via des attributs de données.
<div data-require="@MainModule"> ... </div>
<div data-require="@Module("address")"> ... </div>
<div data-require="view\home\index\model"> ... </div>
Pour une explication complète de la conception et des choix, voir le site web de la Commission européenne. README sur GitHub
