Browserify + Minifyify与非最小化源映射

Browserify + Minifyify with non-minified source maps

本文关键字:最小化 映射 Minifyify Browserify      更新时间:2023-09-26

所以我使用Browserify和Minifyify来捆绑一些JS源代码,并生成源映射。

Minifyify声称指向原始源文件,但当我在Chrome中查看源地图时,我看到的是原始文件的缩小版本。控制台错误中的任何堆栈跟踪总是显示第1行,因为所有的代码都在一行中。

这是Minifyify的预期行为吗,如果不是,我需要做些什么来获得原始源的源映射?

我的设置是这样的:

var hbsfy = require("hbsfy").configure({
  extensions: ["html"]
});
var fs = require('fs');
var opts = { debug: true };
var browserify = require("browserify");
var scriptFile = './app.js';
var outputFile = './build/app.min.js';
var mapFile = 'app.min.map';
var mapOutput = './build/app.min.map';

var b = new browserify(opts);
b.add(scriptFile);
b.transform(hbsfy);
b.plugin('minifyify', { map: mapFile, output: mapOutput });
b.bundle().pipe(fs.createWriteStream(outputFile));

所以我找到了问题所在。这是Windows上miniify的一个错误,与不同的路径分隔符有关。一个快速的修复方法是编辑minifier.js文件,并将这一行添加到Minifier.prototype.transformer:

的顶部
file = file.replace(new RegExp('''' + path.sep, 'g'), '/');

为了将来的参考,这个错误在v4.0.3中,并且很可能在所有以前的版本中。我把这个信息提交给了作者,所以希望它会在下一个版本中修复。

我只在cli中使用过。

但是看看文档,看起来你的最后一行是问题。

试题:

b.bundle(function (err, src, map) {
  if (err) {
    throw err;
  }
  fs.writeFile(outputFile, src);
  fs.writeFile(mapOutput, map);
});

也不需要debug: true

问题就在这里:https://github.com/substack/node-browserify/commit/dddc29673186c1dfe3f99d2af5bef02c51df12f0

我能看到的最简单的解决方案是使用6.0.0之前的最后一个版本的browserify,直到minifyify(和uglifyify)被纠正以解释此更改