Inizialmente ho detto che non è possibile farlo per i motivi seguenti, ma voglio aggiungere che dove c'è una volontà c'è un modo. Sono sicuro di aver dedicato abbastanza tempo e sforzi, tu (o qualcuno) potresti (e probabilmente lo farai) trovare un modo per portare a termine questo compito - ma a partire da adesso (12/12/13), non so se c'è qualche strumento fuori dalla scatola che lo faciliterà.
browserify "moduli" sono scritti utilizzando lo stesso concetto Node.JS moduli. Scrivi il tuo codice ed esporta qualsiasi metodo/proprietà pubblica/ecc. Tramite un oggetto module.exports
. Javascript nel browser non supporta questo genere di cose in modo nativo. Ci sono alcuni template standard (alcune informazioni here) per facilitare questo nel browser e possono essere compatibili con browserify, ma ...
Quando si browserizza il codice, lo script di browserify analizza la sintassi e trova la moduli che deve rendere disponibili tramite il metodo require
. Questo richiede che il metodo venga definito direttamente nel bundle.js esportato, insieme a tutto il codice per tutte le dipendenze richieste dal modulo. Ciò consente al metodo require che browserify definisce di funzionare in modo sincrono, restituendo un riferimento al modulo richiesto immediatamente senza attendere alcun tipo di risposta web (come il caricamento di uno script js).
Require.js funziona fondamentalmente in modo diverso rispetto a browserify. Require.js definisce i pacchetti usando la sintassi define
a cui hai fatto riferimento e espone un metodo require
che usi per indicare a Require.js quali moduli il tuo codice dipende. Require.js quindi, a sua volta, cerca le dipendenze di cui hai bisogno e se non le ha ancora caricate per un altro modulo, genera un nuovo tag script e forza il tuo browser a caricare quel modulo, aspettando di eseguire il tuo codice finché questo non è completo . Questo è un processo asincrono, il che significa che il motore javascript continua a elaborare le istruzioni mentre attende che il nuovo script venga scaricato, analizzato ed eseguito. Require.js avvolge tutto questo in alcuni callback, quindi può aspettare che tutte le dipendenze siano soddisfatte, prima di consentire l'esecuzione del codice definito (ecco perché si passano le funzioni a require
e define
, quindi require.js può eseguirle quando è pronto).
Il motivo principale per non voler raggruppare ogni volta che si apporta un cambiamento nello sviluppo, è solo per la velocità di iterazione. Alcune cose che puoi fare (con browserify) per migliorare le prestazioni (ovvero la velocità di raggruppamento) sono:
- Non rovinare il codice durante lo sviluppo. Puoi raggrupparlo semplicemente usando browserify (assicurati di usare
-d
, per sourcemaps) senza ugolarlo/minificarlo, questo dovrebbe velocizzare un po 'le prestazioni del bundle (per progetti più grandi, comunque).
- Suddividi i moduli un po '. I moduli che non hanno dipendenze dirette tra loro non devono essere costruiti contemporaneamente.È possibile includere diversi moduli nell'applicazione utilizzando più tag di script oppure concatenare insieme i file di bundle di browserify. È possibile impostare in modo assoluto alcune attività di grunt per osservare il proprio codice alla ricerca di modifiche e compilare solo i moduli che contenevano la modifica del codice. Questo eliminerà un sacco di cicli di CPU sprecati, dal momento che browserify non dovrà analizzare e trasformare più moduli, solo quelli che sono cambiati. Da lì puoi ri-concatenare in un unico grande pacchetto, oppure limitarti a includere più pacchetti nella pagina.
fonte
2013-12-12 18:58:29
Grazie per la spiegazione dettagliata signore. '-d' e' grunt watch' è un buon modo per velocizzare le cose. –
l'opzione '-d' non accelera necessariamente la compilazione, ma probabilmente velocizzerà il debugging nel browser, dal momento che avrai i sourcemaps (: –
oppure puoi semplicemente usare requirejs. – andygoestohollywood