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

Question

有如下ES6代码

let that = this;

let DOMdiv = document.querySelectorAll('div');
let DOMdivArray = Array.prototype.slice.call(DOMdiv);
console.log(DOMdivArray);

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

我找到了一个方案，实测有效：就是不使用uglify插件进行压缩，而是使用babel的内置压缩方法：

    .pipe(babel({
        presets: ['es2015'],
        minified: true   // 是否压缩
        // comments: false  // 是否保留注释
    }))

Answer 2

位置错了。

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...