使用gulp和babel的Watchify逐渐变慢

Question

每当 watchify 检测到更改时，打包时间就会变慢。我的 gulp 任务肯定有问题。有人有什么想法吗？

gulp.task('bundle', function() {
    var bundle = browserify({
            debug: true,
            extensions: ['.js', '.jsx'],
            entries: path.resolve(paths.root, files.entry)
        });

    executeBundle(bundle);
});

gulp.task('bundle-watch', function() {
    var bundle = browserify({
        debug: true,
        extensions: ['.js', '.jsx'],
        entries: path.resolve(paths.root, files.entry)
    });

    bundle = watchify(bundle);
    bundle.on('update', function(){
        executeBundle(bundle);
    });
    executeBundle(bundle);

});

function executeBundle(bundle) {
    var start = Date.now();
    bundle
        .transform(babelify.configure({
            ignore: /(bower_components)|(node_modules)/
        }))
        .bundle()
        .on("error", function (err) { console.log("Error : " + err.message); })
        .pipe(source(files.bundle))
        .pipe(gulp.dest(paths.root))
        .pipe($.notify(function() {
            console.log('bundle finished in ' + (Date.now() - start) + 'ms');
        }))
}

- user2927940

---

我认为我已经修复了它，将这两个选项添加到bundle中似乎可以解决它：cache: {}，packageCache: {}。 - user2927940

这些选项是使用watchify所必需的。 - JMM

我已经配置了这些选项，但仍然遇到类似的问题。每次运行时，重建时间都会增加，即使文件只是被触碰（没有实际更改），最终会崩溃并显示 RangeError: Maximum call stack size exceeded。 - Emily

@Emily 把你的问题发布为一个问题。 - JMM

Answer 1

我曾经遇到过同样的问题，通过将环境变量DEBUG设置为babel进行了调查。例如：

我曾遇到此问题并通过将环境变量DEBUG设置为babel进行了调查，例如：

$ DEBUG=babel gulp

检查了调试输出后，我发现 babelify 运行了多次转换。

罪魁祸首是每次执行捆绑包时实际上都会添加转换。你似乎也有同样的问题。

将

.transform(babelify.configure({
    ignore: /(bower_components)|(node_modules)/
}))

从executeBundle内部进入任务。新的bundle-watch可以像这样编写：

gulp.task('bundle-watch', function() {
    var bundle = browserify({
        debug: true,
        extensions: ['.js', '.jsx'],
        entries: path.resolve(paths.root, files.entry)
    });

    bundle = watchify(bundle);
    bundle.transform(babelify.configure({
        ignore: /(bower_components)|(node_modules)/
    }))
    bundle.on('update', function(){
        executeBundle(bundle);
    });
    executeBundle(bundle);
});

- keso

---

希望我可以点赞更多。否则我需要很长时间才能弄明白那个。 - joemaller

非常好！将转换移出每个 watchify 更新调用的方法，解决了我在构建过程中遇到的类似问题，随着时间的推移，构建过程变得越来越长。 - Robin Hawkes