Как избежать связывания ReactJs несколько раз с помощью Gulp?

Question

Я пытаюсь использовать ReactJS как рендеринг библиотеки изображений на стороне клиента. Также я импортирую множество компонентов из Material-UI в качестве компонентов. Одна из проблем заключается в том, что мне нужно использовать gulp для настройки браузера (для использования модуля в браузере) и babelify (скомпилирование JSX на Javascript). Но я обнаружил, что если React связывается более одного раза, пользовательский интерфейс будет иметь ошибку при поведении и стилизации. Согласно this article, я настраиваю gulpfile.js следующим образом.

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

var dependencies = [ 
    'react', 
    'react-dom', 
    'material-ui', 
    'react-tap-event-plugin' 
]; 

var scriptsCount = 0; 

gulp.task('scripts', function() { 
    bundleApp(false); 
}); 

gulp.task('deploy', function(){ 
    bundleApp(true); 
}); 

gulp.task('watch', function() { 
    gulp.watch(['./app/*.js'], ['scripts']); 
}); 

gulp.task('default', ['scripts','watch']); 

function bundleApp(isProduction) { 
    scriptsCount++; 
    var appBundler = browserify({ 
     entries: './app/app.js', 
     debug: true 
    }) 
    if (!isProduction && scriptsCount === 1){ 
    browserify({ 
     require: dependencies, 
     debug: true 
    }) 
    .bundle() 
    .on('error', gutil.log) 
    .pipe(source('vendors.js')) 
    .pipe(gulp.dest('./web/js/')); 
    } 
    if (!isProduction){ 
    dependencies.forEach(function(dep){ 
     appBundler.external(dep); 
    }) 
    } 
    appBundler 
    .transform("babelify", {presets: ["es2015", "react"]}) 
    .bundle() 
    .on('error',gutil.log) 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./web/js/')); 
} 

Если я бегу:

более

gulp scripts 

чем один раз, пользовательский интерфейс будет иметь некоторые проблемы и ошибки в консоли.

И КАК Я должен изменить файл gulpfile, чтобы избежать связывания React? Помоги пожалуйста.

Answer 1

Вам необходимо включить react-addons-transition-group в свой внешний список зависимостей. Я столкнулся с той же проблемой. Вот что я сделал, чтобы решить эту проблему.

1. Подчищены node_modules rm -rf node_modules
2. npm install react-addons-transition-group --save
3. npm install
4. Run gulp scripts

Я надеюсь, что помогает.