时间戳

首页 > 解决方案 > Gulp-Sourcemaps：Chrome DevTools 错误地引用了已编译 js 的源代码

javascript - Gulp-Sourcemaps：Chrome DevTools 错误地引用了已编译 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 源都在 Sources 选项卡中正确显示，控制台打印正确的类和函数名称，但控制台始终指向 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 也正在编译和源映射，并且源映射正常工作。

标签： javascriptgulpgoogle-chrome-devtoolsgulp-sourcemaps

解决方案

看起来 gulp-minify 是问题所在。在使用 gulp-sourcemaps 时，它是一个不受支持的插件。哎呀！我应该彻底阅读文档。我切换到使用 gulp-uglify-es 进行缩小。

推荐阅读