Gulp+Browserify+Babel+Sourcemaps：源图包含重复代码答案

【问题标题】：Gulp+Browserify+Babel+Sourcemaps: Source map contains duplicate codeGulp+Browserify+Babel+Sourcemaps：源图包含重复代码
【发布时间】：2017-09-21 19:47:58
【问题描述】：

我的 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 来解决这个问题的吗？

【问题讨论】：

这里有一个较旧的解决方案 stackoverflow.com/questions/23667340/gulp-browserify-maps 它对我有用

标签： node.js gulp browserify source-maps gulp-sourcemaps

【解决方案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()

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

【讨论】：