Come utilizzare RequireJS optimizer in Play framework?

Question

come pubblicizzato, il rjs in gioco può

garantire che eventuali risorse JavaScript riferimento all'interno di un WebJar vengono automaticamente riferimento dal jsdelivr CDN. Inoltre, se viene trovato qualsiasi file .min.js , verrà utilizzato al posto di .js. Un bonus aggiunto qui è che non è richiesta alcuna modifica al tuo html!

Tuttavia, non riesco a far funzionare nulla di tutto ciò.

1. Ho provato a eseguire la mia app Play in modalità di produzione e tutti i miei javascrip Webjar sono ancora referenziati come locali.
2. Non vedo la versione .min dei file javascript utilizzati nella produzione.

3. Non riesco a ottenere l'iniezione di dipendenza per lavorare in modalità produzione. Per esempio, quando ho voglia di iniettare jquery nel mio codice come questo

   define ([ 'jquery'], la funzione ($) { 'use strict';. console.log ($ grep); ritorno { sum: function (a, b) { return a + b; } }; });

posso farlo funzionare bene in modalità dev, ma in modalità di produzione, l'rjs fallito dicendo

[info] Error: ENOENT, no such file or directory '/Users/khanguyen/Desktop/rjsdemo/target/web/rjs/build/js/jquery.js' 
[info] In module tree: 
[info]  main 
[info]  app 
[info] 
[info] Error: Error: ENOENT, no such file or directory '/Users/khanguyen/Desktop/rjsdemo/target/web/rjs/build/js/jquery.js' 
[info] In module tree: 
[info]  main 
[info]  app 
[info] 
[info]  at Error (native) 

Ovviamente sta esaminando la posizione sbagliata per jQuery, nonostante la messa a punto di configurazione generato da Webjar

requirejs.config({"paths":{"jquery":["/webjars/jquery/1.11.1/jquery","jquery"]},"shim":{"jquery":{"exports":"$"}},"packages":[]}) } 

per avere la posizione corretta per jquery.

Sto utilizzando Play 2.4.0, con l'installazione pipelineStages := Seq(rjs, digest) nel mio build.sbt.

Per favore fatemi sapere dove ho sbagliato.

Grazie!

Answer 1

Si scopre che il supporto dell'ottimizzazione RequireJS non si applica a tutti i Webjars, ma piuttosto limitato ai Webjar classici.

Anche in questo caso, un file di costruzione Webjar deve essere incluso con il modulo normale per consentire a rjs di funzionare.

Se si osserva jQuery classic webjar, ad esempio, si vedrà che è inclusa un'istruzione di sviluppo speciale webjar. Dai un'occhiata a quel file per tua informazione.

Una volta identificato un webjar che è RequireJS pronto, è possibile consentire a sbt-rjs di farlo.Qui è la mia messa a punto di riferimento:

/** javascripts/main.js **/ 
'use strict'; 

requirejs.config({ 
    paths:{ 
     'jquery': ['../lib/jquery/jquery'], 
     'react': ['../lib/react/react'], 
     'bootstrap': ['../lib/bootstrap/js/bootstrap'], 
     'react-bootstrap': ['../lib/react-bootstrap/react-bootstrap'] 
    }, 
    shim: { 
     'bootstrap': { 
      deps: ['jquery'] 
     }, 
     'react-bootstrap': { 
      deps: ['react'] 
     } 
    } 
}); 

Ricorda di avere le parentesi quadre, altrimenti la sostituzione CDN non accadrà.

Per gli script non-requirejs ready, non è necessario avere parentesi quadre quando si dichiara paths. Altrimenti, rjs si rifiuterà di costruire con l'errore path fallback not supported. Ovviamente, non otterrai il vantaggio CDN. Solo una nota a margine, funziona anche l'ottimizzazione del css RequireJS. Ma limitato solo all'inlining del css, come fa il normale Requirejs.