javascript - gulp-babel后的代码uglify后，sourcemaps定位不准

Question

有如下ES6代码

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();

和如下gulp代码

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)'));
        });
});

浏览器执行生成的js输出到控制台的内容，点击文件定位到的代码行不对。是我用法有问题吗？

Answer 1

位置错了。

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)'));
        });
});

参考：

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

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