web-dev-qa-db-fra.com

RequireJS: Plusieurs main.js?

Je construis une application d'une seule page en utilisant requireJS et je l'aime jusqu'à présent. Je suis venu au point de développer d'autres parties du site en dehors de l'application principale et je ne sais pas trop comment (ou si) utiliser requireJS pour cela.

Dans mon application principale, tout est déclenché par cette balise script:

<script data-main='/scripts/main' src='/scripts/libs/require.js'>

Je développe actuellement la page d'accueil qui a ses propres scripts front-end. Utiliser l'optimiseur pour mettre le site en ligne, ce qui regroupera tous ces scripts dans un package main.js. J'ai du mal à comprendre où se situe le reste de mon site.

Supposons que mon application dépende de jQuery et que celle-ci soit intégrée à la version optimisée de l'application. Que se passe-t-il si je souhaite utiliser jQuery sur la page d'accueil? Je ne veux pas charger le main.js de mon application simplement pour avoir accès à mon module jQuery. Alors oui ... un peu confus!


J'imagine une structure de site semblable à celle-ci: 

/scripts
  - app-main.js //(includes all module dependencies after optimzation)
  - home-main.js //(includes all module dependencies after optimzation)

App:

<script data-main='/scripts/app-main' src='/scripts/libs/require.js'>

Page d'accueil:

<script data-main='/scripts/home-main' src='/scripts/libs/require.js'>


Des questions

  1. Comment utiliser RequireJS pour développer différentes parties d'un site?
  2. Est-il recommandé d'avoir plusieurs fichiers main.js?
  3. Comment mes différents fichiers main.js peuvent-ils partager des modules communs tels que l'optimisation postérieure de jQuery?
javascriptmodulerequirejs
31
wilsonpage

Ainsi, require.js doit toujours être utilisé sur n'importe quelle page pour permettre la modularité et un espace de noms propre. Je crois que chaque application nécessite son propre script main.js. Lors de l'optimisation de votre site, r.js vous permet d'exclure des modules de la compilation, ce que vous devez toujours faire pour jQuery.

Ainsi, require.js chargera toujours jquery.js à la volée et la plupart du temps à partir du cache. La recherche d'autres modules susceptibles d'être mis en cache entre votre application et votre page d'accueil devra être effectuée à votre propre discrétion et dépend du flux de vos utilisateurs et d'autres facteurs.

On dirait que vous avez deux projets, une application et un site de marketing. Je crois que ceux-ci devraient être séparés dans une large mesure et devraient avoir leurs propres dossiers 'js' contenant leurs propres fichiers main.js.

0
Thomas Davis

L’équipe requirejs a des exemples d’applications multipages sur github. Regardez: https://github.com/requirejs/example-multipage

Fondamentalement, vous allez avoir la structure suivante:

  • page1.html: page 1 de l'application.

  • page2.html: page 2 de l'application.

  • js app: le répertoire dans lequel stocker les modules spécifiques à l'application.

  • lib: le répertoire contenant les modules tiers, comme jQuery.

  • common.js: contient la configuration requirejs, et ce sera la cible de construction pour l'ensemble des modules communs.

  • page1.js: utilisé pour le data-main pour page1.html. Charge le module commun, puis app/main1, le module principal de la page 1.

  • page2.js: utilisé pour le data-main pour page2.html. Charge le module commun, puis app/main2, le module principal de la page 2.

38
PutzKipa