javascript - 缩小后对原始来源的引用

Question

一旦放大完成，假设我遇到了一些错误，

我希望浏览器的控制台将我指向原始源代码，这样我就可以清楚地看到问题，而不是缩小的代码行。

Script.js + 更多文件(串联加缩小)

   var somevar = 4
   console.log(someVar) //misspelled var name

控制台将带我到此文件

script.min.js

var somevar=4;console.log(someVar)

我见过一些带有一些js库的.map文件，不知道它们是如何工作的。

有人可以建议，如果缩小文件中出现错误/问题，浏览器的控制台如何引用原始源。

gulp.task("app", function() {
    var app = [
        "js/libs/abc.js",
        "js/file1.js",
        "js/file2.js"
    ];

    gulp.src(app)
        .pipe(concat("app.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("js"))
});

Answer 1

将其安装到您的开发依赖项中 https://www.npmjs.com/package/gulp-sourcemaps

gulp.src(app)
        .pipe(concat("app.min.js"))
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest("js"))

确保生成的 JavaScript 文件 example.js 末尾具有源映射 url，如下所示:

//# sourceMappingURL=example.js.map