Gulp+Browserify+Babel+Sourcemaps: Source map 包含重复代码

Question

我的 gulpfile 有以下内容：

const gulp = require("gulp");
const sourcemaps = require("gulp-sourcemaps");
const browserify = require("browserify");
const source = require("vinyl-source-stream");
const buffer = require("vinyl-buffer");
const babel = require("babel");
const uglify = require("uglify");

gulp.task("default", function() {
    return browserify("src/app.js", {debug: true})
        .bundle()
        .pipe(source("app.js"))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(babel({presets: ["env"]}))
        .pipe(uglify())
        .pipe(sourcemaps.write("/src"))
        .pipe(glup.dest("dist"));
});

非常标准的东西。我的 src/app.js 仅包含以下内容：

const $ = require("jquery");
console.log($);

现在，当我运行 gulp 并查看 Chrome 控制台时，我看到以下内容：

此列表中的第一个 app.js 文件位于 src/js/app.js，是我的实际源文件，包含两行代码。

此列表中的最后一个app.js文件，位于app.js（无子目录），是经过编译和缩小的版本，带有一行难以理解的垃圾

然而，中间的位于 src/app.js，包含运行ning babel 或 uglify 之前的完整浏览器化源（"const" 关键字仍然存在并且它是 multi-line 并且完全可读)

这使我的源映射比需要的大两倍，因为它包含项目的整个源代码两倍 .有什么清理技巧吗？

更新

通过一些快速测试，我已将问题缩小到 Babel。

当我删除 Babel 并只删除运行 Uglify（修改 app.js 以删除 const 关键字，这样 Uglify 就不会吐到我身上）我没有得到重复代码在我的源地图中。

当我删除 Uglify 和运行 Babel 时，我仍然得到重复代码。

出于某种原因，当 Babel 看到 Browserify 的输出时，它似乎将原始源地图和都视为原始源 file 作为源代码（将它们都放在最终的源映射中）。

我需要传递给 Babel 来解决这个问题吗？

Answer 1

虽然我没有找到直接使用 Babel 的方法，但我确实找到了绕过 .pipe(babel()) 步骤的方法：

npm install --save-dev babelify

如果您使用 Browserify 转换而不是直接使用 Babel，那么源映射从一开始就不会出错：

// Most of the file omitted for brevity. Only new / different stuff shown
const babelify = require("babelify");

browserify("app.js", {debug: true})
    .transform(babelify, {presets: ["env"]})
    .bundle()

这按预期工作并创建了一个只有一个所有代码实例的源映射。

Gulp+Browserify+Babel+Sourcemaps: Source map 包含重复代码

Gulp+Browserify+Babel+Sourcemaps: Source map contains duplicate code

node.js

browserify

source-maps

gulp

gulp-sourcemaps

更新