繁体   English   中英

Gulp-Sourcemaps:Chrome DevTools错误地引用了已编译js的源代码

[英]Gulp-Sourcemaps: Chrome DevTools incorrectly references source of compiled js

示例案例:

我有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可以正常工作。

看起来问题很大。 当使用gulp-sourcemaps时,它是不受支持的插件。 哎呀! 我应该已经仔细阅读了文档。 我改用gulp-uglify-es进行缩小。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM