RactJSのホットリロードブラウザ/ watchify/livereactload websocketエラー

Question

私は以下のgulp.js設定を持っています。それは作品のようなものです。サーバーにファイルを保存すると、再構築された処理が期待どおりに開始および終了することがわかります。しかしbroswerはただエラーをrecieves：

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). 

しかし、バベル-変換がinstaledされ、私は必要なインスタレーションすべての手順に従ってきた...まだ何かがあります間違って、誰かが何を知っている？

//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: [...] }));