Gulp + Browserify + Babel + Sourcemaps：源地图包含重复的代码

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不会对我进行禁锢）我在源地图中没有得到重复的代码。< / p>

当我删除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()

这可以按预期工作，并创建一个只包含所有代码的一个实例的源地图。