Browserifying réagissent avec addons à un composant autonome, utilisable par les plugins

Question

J'experementing un peu avec réagir et browserify et ont ces souhaits:

• Je veux regrouper tout le code écrit par moi dans un seul fichier
• Je veux regrouper toutes les dépendances 3ème partie (réagir, réagir-routeur, lodash etc) dans des fichiers séparés, un pour chaque lib, afin de maximiser les possibilités de mise en cache

J'ai réussi à faire les choses décrites ci-dessus, mais j'ai couru dans cette situation spécifique:

Dans certains endroits de mon code, je veux utiliser réagir avec des addons et en tant que tel l'exigent comme ceci: var React = require('react/addons). Je ne le fais pas dans toutes les parties de mon code et cela ne se fait pas dans les dépendances tierces telles que le routeur de réaction. Cela semble créer un conflit. Soit le bundle browserified sera seulement disponible par var React = require('react/addons) qui casse des dépendances de tiers, ou je devrai rassembler réagir avec ou sans addons quels manas qui réagissent sont empaquetés et téléchargés deux fois.

J'ai essayé d'utiliser aliasify et de faire react un alias pour react/addons mais je ne pouvais pas le faire fonctionner. Est-ce que cela devrait être possible?

Une autre solution acceptable serait de regrouper seulement addons dans un paquet séparé et par ce faire à la fois react et react/addons disponibles par le biais des appels à require. Est-ce que c'est possible?

Addition Comme un commentaire au premier commentaire par BrandonTilley, ce n'est pas seulement applicable à réagir et addons. Lodash vient également avec un certain nombre de distributions différentes et j'aimerais pouvoir choisir la version à utiliser dans ma webapp dans ce cas aussi.

Answer 1

Merci pour toutes les suggestions mais la solution que j'ai choisie est un "shim" si c'est le bon terme. On dirait ceci:

1. Browserify réagissent/addons dans son propre fichier
2. Créer mon propre fichier (shim appelé) ne contenant ceci: module.exports = require('react/addons');
3. Browserify ma cale et utilisez l'option exposer, exposer comme réagir

maintenant, que ce soit le cas réagir ou réagir/addons est requis, je me réagis/addons

Answer 2

Semble comme le cas d'utilisation parfait pour factor-bundle.

De l'browserify handbook:

facteur faisceau divise browserify en sortie de cibles multiples faisceaux sur la base du point d'entrée. Pour chaque point d'entrée, un fichier de sortie spécifique à l'entrée est créé. Les fichiers dont ont besoin deux fichiers d'entrée ou plus sont factorisés en un ensemble commun.

Answer 3

Notez que ce que vous voulez réaliser est documenté ici: Browserify partitionning

J'emballage mon application en 2 parties: appLibs.js et app.js. Je l'ai fait pour la mise en cache aussi, mais je choisis de mettre tout le code qui ne change pas souvent dans un seul paquet au lieu de le diviser comme vous voulez, mais vous pouvez utiliser la même astuce.

Voici le code qui pourraient vous intéresser:

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()....... 
}); 

De cette façon, réagissez est seulement empaqueté une fois dans appLibs.js et peut être nécessaire à l'intérieur app.js utilisant à la fois react et react/addons

Si vous voulez vraiment regrouper vos bibliothèques dans des fichiers séparés, empaquetez alors avec b.require("myLib"), mais dans ce cas assurez-vous de vérifier que les bibliothèques n'ont pas de dépendances directes. Si une lib à bundle a une dépendance dans React, cela signifie que lib sera empaqueté dans le bundle, conduisant potentiellement à plusieurs paquets ayant React à l'intérieur (et faisant des échecs étranges à l'exécution). La bibliothèque devrait plutôt utiliser peerDependencies pour que b.require n'essaye pas de conditionner ces dépendances