RequireJS: multiple main.js?

Question

Sto costruendo un'applicazione per singola pagina usando requireJS e fino ad ora amandola. Sono arrivato al punto di sviluppare altre parti del sito al di fuori dell'app principale e non sono davvero sicuro di come (o se) utilizzare requireJS per questo.

Nel mio principale applicazione tutto viene attivato da questo tag script:

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

ora sto sviluppando la home page, che ha il proprio script di front-end. Usando l'ottimizzatore quando si tratta di far vivere il sito che raggrupperà tutti questi script in un unico pacchetto main.js. Sto lottando per capire dove si inserisce il resto del mio sito.

Supponiamo che la mia app dipenda da jQuery e venga inserita nella versione ottimizzata dell'app, e se volessi utilizzare jQuery nella home page? Non voglio caricare nella mia app main.js solo per accedere al mio modulo jQuery. Quindi sì ... un po 'confuso!

sto immaginando una struttura del sito un po 'come questo:

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

Homepage:

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

Domande

1. Come posso usare RequireJS per sviluppare diverse parti di un sito?
2. Si consiglia di avere più file main.js?
3. In che modo i miei diversi file main.js condividono moduli comuni come l'ottimizzazione post di jQuery?

Answer 1

Quindi require.js deve sempre essere utilizzato su qualsiasi pagina per consentire la modularità e uno spazio dei nomi pulito. Credo che ogni 'app' abbia bisogno del proprio script main.js. Quando ottimizzi il tuo sito r.js ti permette di escludere moduli dalla compilation che dovresti fare sempre per jQuery.

In questo modo require.js caricherà sempre jquery.js al volo e il più delle volte dalla cache. La ricerca di altri moduli che potrebbero essere memorizzati nella cache tra l'app e la home page dovrà essere eseguita a propria discrezione e dipende dal flusso degli utenti e da altri fattori.

Sembra che tu abbia due progetti, un'app e un sito di marketing. Credo che questi debbano essere separati in modo abbastanza esteso e dovrebbero avere le rispettive cartelle "js" contenenti i propri main.js.

Answer 2

Il team requirejs ha alcuni esempi per applicazioni multipagina su github. Date un'occhiata a: https://github.com/requirejs/example-multipage

In sostanza si sta per avere la seguente struttura:

• page1.html: Pagina 1 del app.

• page2.html: pagina 2 dell'app.

• js app: la directory in cui è possibile memorizzare moduli specifici dell'app.

• lib: la directory per contenere moduli di terze parti, come jQuery.

• common.js: contiene la configurazione requirejs e sarà il target di build per il set di moduli comuni.

• page1.js: utilizzato per il data-main per page1.html. Carica il modulo comune, quindi carica app/main1, il modulo principale per pagina 1.

• page2.js: utilizzato per il data-main per page2.html. Carica il modulo comune, quindi carica app/main2, il modulo principale per pagina 2.