javascript - gulp-babel后的代碼uglify后，sourcemaps定位不準

問題描述

有如下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輸出到控制臺的內容，點擊文件定位到的代碼行不對。是我用法有問題嗎？

問題解答

位置錯了。

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