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