Блог

Я пытаюсь использовать 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 amp;amp; 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
  

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

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

Вам необходимо включить 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

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