RactJS热重载browserify/watchify/livereactload错误

Question

我有以下gulp.js配置。这挺管用的。一旦我在服务器上保存了一个文件，我就可以看到重新捆绑过程按预期开始和结束。然而，浏览器只收到一个错误：

bundle.js:37 WebSocket connection to 'wss://myPage:4474/' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

还有一个明显的警告：

Could not detect LiveReactLoad transform (livereactload/babel-transform).

但是，已经安装了babel-transform，并且我已经按照安装所需的所有步骤进行了操作。还是有些不对劲，有人知道是什么吗？

//gulpfile.js
var source = {
    html: 'react_src/index.html',
    jsx: 'react_src/main.jsx'
};

var dist = {
    html: 'templates/project',
    scripts: 'static/js'
};

var sourcemaps = require('gulp-sourcemaps');
//Compile and Watch
function compile() {

    var bundler = watchify(browserify(
        {
            entries: source.jsx,
            debug: true,
            extensions: ['.jsx'],
            plugin: ["livereactload"],

        }).transform(babel, {presets: ['es2015','stage-0', 'react']}));

    function rebundle() {
      return bundler.bundle()
        // log errors if they happen
        .on('error', function(err) {console.error(err); this.emit('end'); })
        .pipe(vinyl_source('bundle.js'))
        // optional, remove if you don't need to buffer file contents
        .pipe(buffer())
        // optional, remove if you dont want sourcemaps
        .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
           // Add transformation tasks to the pipeline here.
        .pipe(sourcemaps.write('./')) // writes .map file
        .pipe(gulp.dest(dist.scripts));
    }

    if (watch) {
        // watch html

  // processing method
  let _build = () => {
    return bundler.bundle()
      .on('error', (err) => {
        gutil.log(err.stack);
      })
      .pipe(vinyl_source('bundle.js'))
      .pipe(gulp.dest('build'));
  };

    // on change
    bundler.on('update', () => {
      gutil.log('Rerunning browserify...');
      const updateStart = Date.now();
      _build().on('end', () => {
        gutil.log(`...Done ${Date.now() - updateStart} ms`);          
      });
    });

    }

    rebundle();
}


function watch() {
    return compile(true);
}
//gulp.task('js', function (cb) { bundle().on('end', cb); });

// build jsx
gulp.task('build', function() {
    return compile();
});

gulp.task('watch', function() {
    return watch();
});


// build html
gulp.task('replaceHTML', function () {
    gulp.src(source.html)
        .pipe(htmlReplace({
            'js': '<script src="{% static \'js\\bundle.js\' %}"></script>'
        }))
        .pipe(gulp.dest(dist.html));
});

gulp.task('server', ['replaceHTML'], function() {
  return gulp.src(source.jsx)
  .pipe(livereactload({
    host: '0.0.0.0',
    port: 8081
  }));
});

Answer 1

您应该在transform函数调用中为babel传递plugins选项：

.transform(babel, { presets: ['es2015','stage-0', 'react'], plugins: [...] }));