node.js - Gulp+Browserify+Babel+Sourcemaps : Source map contains duplicate code

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 中的中间一个包含运行 babel 或 uglify 之前的完整浏览器化源代码(“const”关键字仍然存在，并且它是多行且完全可读)

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

更新

做了一些快速测试，我已将问题范围缩小到 Babel。

当我删除 Babel 并运行 Uglify(修改 app.js 以删除 const 关键字，这样 Uglify 就不会在我身上呕吐)时，我的源映射中没有收到重复的代码。

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

出于某种原因，当 Babel 看到 Browserify 的输出时，它似乎将原始源映射和原始源文件视为源代码(将它们都放在最终源映射中)。

我需要传递一些东西给 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()

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