Gulp-Sourcemaps：Chrome DevTools錯誤地引用了已編譯js的源代碼

Question

示例案例：

我有3個JavaScript文件（Act.js，Body.js，SpriteSheets.js）正在與gulp 4.0一起編譯，並用gulp-sourcemaps 2.6.4映射了源代碼。 Body.js的第43行引發錯誤，但控制台顯示Act.js的第194行。 Act.js有151行，因此，如果我在控制台中單擊Act.js：194鏈接，它將打開Sources並突出顯示Act.js中的最后一行（151）。

所有3個javascript源均會在“源”選項卡中正確顯示，並且控制台會打印正確的類和函數名稱，但控制台始終指向Act.js，即使其他文件中存在控制台日志也是如此。

我不知道這是Chrome問題，gulp-sourcemaps問題還是我的代碼問題。 有任何想法嗎？

Gulp編譯功能：

const gulp = require('gulp');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const plumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');
....

const compileJS = (src, dest, name, include) => {
    console.log(`js compile ${src}`);
    let glob = [src];
    if (include){
        glob = include.first ? include.src.concat(glob) : glob.concat(include.src);
    }
    return gulp.src(glob)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        // concat all js in folder and name result as folder's name
        .pipe(concat(name + '.js'))
        .pipe(minify({
            noSource: true,
            ext: {
                min: '.min.js'
            }
        }))
        .pipe(sourcemaps.write('./', {
            sourceMappingURLPrefix: src.replace('./', '').replace('src', '').replace('/**', '').replace('/*.js', '')
        }))
        .pipe(gulp.dest(dest));
};

我應該注意，SASS也正在被編譯和源映射，並且sourcemap可以正常工作。

Answer 1

看起來問題很大。 當使用gulp-sourcemaps時，它是不受支持的插件。 哎呀！ 我應該已經仔細閱讀了文檔。 我改用gulp-uglify-es進行縮小。