4

我正在使用 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 运行的未缩小的非捆绑资产？

4

1 回答 1

2

如果您还没有关注GitHub 问题 Ash 归档，则 watchify 目前不支持 minifyify。

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

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

README 中添加了记录此限制的说明。

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

于 2014-10-27T19:45:11.997 回答