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任务

如何在开发环境中更改ES6代码时启用自动更新客户端逻辑？

1 个答案: