Esegui script utilizzando Browserify senza processo di compilazione prima

Question

ho letto attraverso molti articoli su Browserify come http://javascriptplayground.com/blog/2013/11/backbone-browserify/ e c'è sempre un passo così come di seguito:

$ browserify app/app.js | uglifyjs > app/bundle.js 

Questo sembra essere fatto prima si esegue lo script in il browser per vedere come funziona. C'è un modo NON dover fare compilare ogni volta che cambio codice? Qualcosa di simile alla funzione define() in requirejs ...

Answer 1

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à.

1. 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 ...

2. 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.

Answer 2

È il 2015 ora e c'è una libreria per questo, si chiama drq. Utilizza le richieste xhr di sincronizzazione interna, quindi è adatto solo per scopi di sviluppo. Non vi resta che includerlo:

<script src="drq.js"></script> 

E poi, si può fare il vostro bisogno chiamate in qualsiasi script della pagina:

<script> 

var myModule = require('my-module'), 
    myClass = require('./classes/my-class.js'); 

// etc. 

</script> 

Si cercherà moduli nodo fino alla root del server web, in modo da assicurati di inviarli a una directory non superiore a npm install. Inoltre, si prega di dare un'occhiata allo GitHub page dove è possibile trovare alcuni suggerimenti per aumentare le prestazioni.

Ancora una volta, si ricorda che i pacchetti sono la soluzione ottimale per la produzione.