Browserifying reagiscono con addons per un componente autonomo, utilizzabile dai plugin

Question

sto experementing un po 'con reagire e browserify e hanno questi desideri:

• voglio riunire tutto il codice scritto da me in un unico file
• voglio riunire tutte le dipendenze 3rd party (reagire, reagire-router, lodash ecc) in file separati, uno per ogni lib, per massimizzare le possibilità di caching

sono riuscito a fare le cose descritte sopra, ma mi sono imbattuto in questa specifica situazione:

In alcuni punti del mio codice, desidero utilizzare reagire con gli addon e come tale richiede in questo modo: var React = require('react/addons). Non lo faccio in tutte le parti del mio codice e non è fatto in dipendenze di terze parti come react-router. Questo sembra creare un conflitto. O il bundle browserizzato sarà disponibile solo tramite var React = require('react/addons) che interrompe le dipendenze di terze parti, o dovrò reagire in bundle sia con che senza addon, i quali reagiscono in bundle e scaricati due volte.

Ho provato a utilizzare aliasify e faccio react uno pseudonimo per react/addons ma non riuscivo a farlo funzionare. Dovrebbe essere possibile?

Un'altra soluzione accettabile sarebbe quella di raggruppare solo addons in un fascio separato e attraverso questo fare sia react e react/addons disponibili tramite chiamate require. Tutto ciò è possibile?

aggiunta Come commento al primo commento di BrandonTilley, questo non è solo applicabile a reagire e addons. Lodash ha anche diverse distribuzioni e vorrei poter scegliere anche la versione da utilizzare nella mia webapp.

Answer 1

Grazie per tutti i suggerimenti, ma la soluzione che ho scelto è uno "shim" se questo è il termine corretto. Sembra che questo:

1. Browserify reagiscono/Il mondo in un suo file
2. creare il mio file (denominato shim) solo che contiene questo: module.exports = require('react/addons');
3. Browserify mia spessore e utilizzare l'opzione di esporre, esponendolo come reagire

Ora, o se reagire o reagire/il mondo è richiesta vengo reagisco/il mondo

Answer 2

Suona come il caso d'uso perfetto per factor-bundle.

Dal browserify handbook:

fattore-fascio divide browserify uscita in più bersagli fascio in base entry-point. Per ogni punto di ingresso, viene creato un file di output specifico per la voce. I file necessari a due o più file di voci vengono scomposti in un pacchetto comune.

Answer 3

Si noti che ciò che si vuole raggiungere è documentato qui: Browserify partitionning

sto imballaggio mia app in 2 parti: appLibs.js e app.js. Ho fatto questo anche per il caching ma ho scelto di mettere tutto il codice che non cambia spesso in un singolo bundle invece di dividerlo come vuoi, ma puoi usare lo stesso trucco.

Ecco il codice che potrebbe interessarti:

var libs = [ 
    "react", 
    "react/addons", // See why: https://github.com/substack/node-browserify/issues/1161 
    ... other libs 
]; 

gulp.task('browserify-libs', function() { 
    var b = browserify(...); 
    libs.forEach(function(lib) { 
     b.require(lib); 
    }); 
    return b.bundle()....... 
}); 
gulp.task('browserify',['browserify-libs'],function() { 
    var b = browserify(...); 
    libs.forEach(function(lib) { 
     b.external(lib); 
    }); 
    return b.bundle()....... 
}); 

In questo modo, Reagire è fornito in bundle una sola volta nell'arco appLibs.js e possono essere richiesti all'interno app.js utilizzando sia react e react/addons

Se davvero si vuole raggruppare le tue librerie in file separati, quindi raggruppa con b.require("myLib"), ma in questo caso assicurati di controllare che le librerie non abbiano dipendenze dirette. Se una lib in bundle ha una dipendenza in React, ciò significa che lib sarà impacchettata nel bundle, portando potenzialmente a più bundle con React al loro interno (e facendo strani fallimenti in fase di runtime). La libreria dovrebbe piuttosto usare in modo che b.require non provi a comprimere queste dipendenze