Question

我正在尝试将ReactJS用作客户端的视图库呈现。此外，我从Material-UI导入许多组件作为组件。一个问题是我需要使用gulp来设置browserify（用于在浏览器中使用模块）和babelify（将JSX编译为Javascript）。 但我发现如果React捆绑多次，UI会在行为和样式上出错。 根据{{3}}，我将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

不止一次，UI会在控制台中出现一些问题和错误。

那么我该如何修改gulp文件以避免捆绑React？请帮助。

Answer 1

您需要将react-addons-transition-group包含在外部依赖关系列表中。我遇到了同样的问题。以下是我为解决问题所做的工作。

清理node_modules rm -rf node_modules
npm install react-addons-transition-group --save
npm install
运行gulp scripts

我希望有所帮助。

如何避免使用Gulp多次捆绑ReactJs？

1 个答案: