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

Я пытаюсь использовать ReactJS в качестве визуализации библиотеки представления на стороне клиента. Также я импортирую много компонентов из Material-UI в качестве компонентов.
Одна из проблем заключается в том, что мне нужно использовать gulp для настройки browserify(для использования модуля в браузере ) и babelify(компиляция JSX в Javascript). Но я обнаружил, что если React поставляется более одного раза, пользовательский интерфейс будет иметь ошибку в поведении и стиле.
Согласно этой статье, я настраиваю 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? Помогите пожалуйста.

1 ответ

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

    1. Очищено node_modules rm -rf node_modules
    2. npm install react-addons-transition-group --save
    3. npm install
    4. Бежать gulp scripts

    Надеюсь, это поможет.