開発環境でES6コードを変更するときにクライアントロジックを自動更新するにはどうすればよいですか？

Question

問題：私はコードで遊んでES6を学んでいます。私は、変更を加えるたびにサーバーを再構築して再起動するのは非常に面倒です。

目的：私が保存した変更を手動で再構築することなくブラウザに反映させ、サーバーを再起動します。それを行う最も簡単な方法は何ですか？

背景： package.jsonファイルの現在のスクリプト構成は次のとおりです。

"scripts": { 
    "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js", 
    "start": "http-server -p 9000" 
}, 

これは明らかです。ありがとうございました！

Answer 1

プロジェクトを実行するには、gulpタスクを使用する必要があります。その場合は、browser-sync + gulp.watch()が最適です。以下はあなたのgulpタスク.jsファイルに以下のようなものを追加してください。 es6ソースコードを変更して保存すると、自動的にブラウザがビルドされ、更新されます。

var gulp  = require('gulp'); 
var browser  = require('browser-sync').create(); 

// your default task goes here that should add "watch-changes" as dependency 

// watch changes in js and html files 
gulp.task('watch-changes', function() { 
    browser.init({ 
     // initiate your browser here, refer browser-sync website 
     }); 
    gulp.watch(
     ['build/main.bundle.js', 'webapp/**/*.html'], 
     browser.reload); 
}); 

チェックhereきちんとした例。

browser-syncウェブサイトとnpm gulp-watchタスク

を参照してください。