Mit Schluck, browserifizieren und reagieren mit Addons

Question

Ich versuche zu Schluck zu lernen, zu browserifizieren und zu reagieren und habe ein kleines Testprojekt angestoßen. Das war in Ordnung, bis ich mich entschied, dort einige Animationen zu implementieren. Insbesondere folgt aus:

var React = require("react"); 
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

Ich erhalte einen Fehler, da "React.addons" null ist.

Ich habe auch das Problem, dass mein Build ein Alter nimmt - zwischen 20 Sekunden und einer Minute. Ich denke, der Grund liegt teilweise daran, dass react selbst in meinem Bündel enthalten ist, während ich es am liebsten von einem CDN abrufen möchte (oder es zumindest getrennt halten).

Das ist mein gulpfile:

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

gulp.task('js', function() { 
    return browserify('./public/js/app.js', { 
     debug: false, bundleExternal: true 
    }) 
    .transform(babelify, {"presets": ["es2015", "react"]}) 
    .bundle() 
    .pipe(source('app.js')) 
    .pipe(gulp.dest('./build/js/')); 
}); 

Wenn ich „bundleExternal“ auf false gesetzt, dann wird es aufhören reagieren in meine js enthalten ist - aber dann funktioniert nichts, weil „reagieren“ nicht gefunden wird. Ich habe etwas über Browser-Shims gefunden, aber ich konnte es nicht aus dem Schluck holen. Und war nicht sicher, ob es der richtige Weg war?

Entschuldigung für die neue Frage!

Answer 1

Um umfassen ReactCSSTransitionGroup Sie müssen es zuerst installieren:

npm install react-addons-css-transition-group 

Dann benötigen sie nur:

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');