Watchify 未正确处理源映射

Question

我正在使用 Browserify 来捆绑我所有的 Javascript 资产。然而，随着应用程序变得越来越复杂，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 运行的未压缩的非捆绑资产？

Answer 1

如果你还没有关注过GitHub issue Ash filed，那么watchify目前不支持minifyify。

Ben-ng，minifyify 的作者说（2014 年 10 月 1 日）：

我没有用 watchify 测试过 minify，也不打算支持它。 minifyify 用于生产，而 watchify 用于开发。

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

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