javascript - Watchify 没有正确处理源 map

Question

我正在使用 Browserify 来捆绑我所有的 Javascript Assets 。但是，随着应用程序变得越来越复杂，Browserify 的构建速度开始变得非常缓慢，所以我切换到 Watchify，它很好地解决了这个问题。

然而，这引入了一个新问题。在此期间，我正在输出用于调试目的的源映射，并使用 Minifyify 缩小输出。在第一次运行 Watchify 时，这工作正常，源映射正确映射到原始文件。但是，如果我随后修改文件，源映射最终会指向原始文件的缩小版本，而不是未缩小版本。

我假设这是因为 Watchify 没有接受输入源映射然后修改它，但我不确定。

这是我的代码:

var watchScripts = function() {
    var rebundle = function() {
        return bundler.bundle()
            .pipe(source('app.min.js'))
            .pipe(gulp.dest('build/scripts/'));
    };
    var bundler = watchify({
            entries: ['./app/scripts/app.js', './app/jsx/app.jsx'],
            extensions: ['.js', '.jsx']
        })
        .plugin('minifyify', {
            map: 'app.js.map',
            output: 'build/scripts/app.js.map'
        })
        .transform(reactify)
        .transform(debowerify)
        .on('update', rebundle);

    return rebundle();
};

这里出了什么问题？ Watchify 是否确实在第二次运行时没有考虑已经存在的源映射，还是其他原因？无论哪种方式，我如何让它工作，以便源映射在第二次和后续运行时通过 Watchify 正确链接回未压缩的未捆绑 Assets ？

Answer 1

如果您还没有关注 GitHub issue Ash filed , watchify 目前不支持 minifyify。

Ben-ng，minifyify 的作者说(2014 年 10 月 1 日):

i have not tested minifyify with watchify and do not intend to support it. minifyify is meant to be used in production, while watchify is meant to be used in development.

记录此限制的注释 has been added to the README .

解决方案似乎是仅在开发中使用 watchify，然后使用 minifyify 创建生产包以进行部署/集成。这可能会掩盖缩小本身引入的错误，但希望这些错误应该足够少，以便可以在 CI/staging 中捕获它们。