javascript - Selepas kod gulp-babel uglify, kedudukan peta sumber tidak tepat

Question

Terdapat kod ES6 berikut

let that = this;

let DOMp = document.querySelectorAll('p');
let DOMpArray = Array.prototype.slice.call(DOMp);
console.log(DOMpArray);

class Modal {
    constructor() {
        console.log('what');
        this.init();
    }
    init() {
    }
}

new Modal();

Dan kod gulp berikut

const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const chalk = require('chalk');
gulp.task('js', function () {
    console.log(chalk.yellow('[进行中] js(!entry_*.js ES6->ES5)'));
    return gulp.src('dev/js/test.js')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(babel())
        .pipe(uglify())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest(`./static/js/`))
        .on('end', function () {
            console.log(chalk.green('[已完成] js(!entry_*.js ES6->ES5)'));
        });
});

Pelayar melaksanakan output js yang dijana ke konsol, dan baris kod yang terletak apabila mengklik pada fail adalah tidak betul. Adakah terdapat sesuatu yang salah dengan penggunaan saya?

Answer 1

Lokasi salah.

const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const chalk = require('chalk');
gulp.task('js', function () {
    console.log(chalk.yellow('[进行中] js(!entry_*.js ES6->ES5)'));
    return gulp.src('dev/js/test.js')
        .pipe(sourcemaps.init()) // <------ 这里
        .pipe(plumber())    // <------ 这里
        .pipe(babel())
        .pipe(uglify())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest(`./static/js/`))
        .on('end', function () {
            console.log(chalk.green('[已完成] js(!entry_*.js ES6->ES5)'));
        });
});

Rujukan:

• https://stackoverflow.com/que...

• https://fettblog.eu/gulp-4-so...