Le module Load RequireJS intègre le corps HTML?

Je suis en train d'intégrer RequireJS dans un CMS, donc je l'ai placé au bas de mon modèle de page:

<html> <body> {Placeholder1} <script src="scripts/require.js" data-main="scripts/main"></script> {Placeholder2} </body> </html> 

Ensuite, sur chaque page, j'aimerais créer une fonction qui exploite RequireJS. J'ai donc essayé de placer ceci au bas de la page:

 <html> <body> <h1>Home</h1> <div class="slider">Slider content</div> <script src="scripts/require.js" data-main="scripts/main"></script> <script type="text/javascript"> require([ 'jquery', 'utils', 'slider' ], function ($, utils, slider) { slider.start(); }); </script> </body> </html> 

Mais j'obtiens 404 sur les fichiers jquery, utils et slider js. Il semble qu'il ne lit pas mes configurations principales.js que j'ai:

 require.config({ paths: { jquery: 'libs/jquery-1.8.1.min', utils: 'libs/utils', slider: 'libs/jquery.slider.min' }, shim: { slider: ['jquery'] } }); require([ 'utils' ], function (utils) { utils.init(); }); 

J'ai essayé de charger RequireJS et principal dans la tête de page, mais j'ai obtenu des résultats inconsistants de cette façon. Parfois, jquery, utils et slider seraient chargés dans le temps et autres fois non. C'est comme si le "requis" en ligne au bas de la page n'est pas au courant de l'exigence principale de la page ou des règles de dépendance, mais mon point d'arrêt frappe dans main.js afin que je sache qu'il est appelé. Est-ce parce que main.js est chargé de manière asynchrone mais mon bloc "requis" en ligne au bas de la page est chargé sur le rendu de la page? Comment puis-je contourner cela?

J'ai utilisé RequireJS avec succès avant mais sans CMS. J'ai toujours utilisé "définir" et j'ai toujours appelé des modules de manière asynchrone, mais je n'ai jamais eu à appeler la fonction RequireJS en ligne comme celle-ci. Des idées sur la bonne façon de faire cela?

L'important ici est que les options de configuration sont définies avant que les modules ne soient demandés. Comme vous l'avez bien identifié, il existe des conditions de course qui signifient que les options de configuration de votre main.js ne sont pas chargées à temps. Le moyen le plus simple serait de mettre les options de configuration en ligne avant que le script require.js soit chargé.

 <script> var require = { baseUrl: <?= $someVar ?>, paths: { // etc } } </script> <script src="scripts/require.js" data-main="scripts/main"></script> 

Plus loin dans la page:

 <script> require([ 'jquery', 'utils', 'slider' ], function ($, utils, slider) { slider.start(); }); </script> 

Voir aussi Comment fonctionne RequireJS avec plusieurs pages et vues partielles?

Il semble que ce qui se passe, c'est que le main.js est chargé de manière asynchrone, alors que l'exigence en ligne est appelée tout de suite. C'est pourquoi il existe des résultats incohérents. La solution est de NE PAS utiliser l'attribut principal de données et d'appeler le fichier main.js via l'étiquette de script sous la balise de script require.js.

Vous pouvez toujours déterminer le baseUrl à partir du fichier principal.js chargé en y intégrant:

 //DETERMINE BASE URL FROM CURRENT SCRIPT PATH var scripts = document.getElementsByTagName("script"); var src = scripts[scripts.length-1].src; var baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/')); //CONFIGURE LIBRARIES AND DEPENDENCIES VIA REQUIREJS require.config({ baseUrl: baseUrl, ....