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