javascript – 检查未正确处理源地图

2023年2月15日 225次阅读

我正在使用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的未分类非捆绑资产？

最佳答案 如果您没有关注
GitHub issue Ash filed,则watchify目前不支持minifyify.

minifyify的作者Ben-ng说(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 /分期中捕获它们.

点赞