웹 로그 오류를보고/감시/실시간으로 재로드하는 RactJS

Question

다음 gulp.js 구성이 있습니다. 그것은 일종의 작품입니다. 일단 서버에 파일을 저장하면 rebundling proces가 예상대로 시작되고 끝나는 것을 볼 수 있습니다. 이 broswer 그냥 오류를 받으면에 그러나 : 아직 뭔가가 .. 내가 필요한 INSTALATION 모든 단계를 따라했습니다

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

그러나 바벨 - 변환 instaled된다 :

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

또한 눈에 보이는 경고가 뭐가 잘못 됐어?

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