Gulp -sourcemaps does not work with babel 6

Question

So babel has published version 6, which is dramatically different. The source cards do not come out correctly (clicking in the js file not in the chrome developer does not lead me to the correct corresponding line in the es6 source file).

Here is my gulpfile:

"use strict"; var gulp = require("gulp"), sourcemaps = require("gulp-sourcemaps"), babel = require("gulp-babel"), uglify = require('gulp-uglify'), rename = require('gulp-rename'); var paths = ['dojo-utils', 'dom-utils/dom-utils', 'esri-utils/esri-utils', 'esri-utils/classes/EsriAuthManager/EsriAuthManager']; gulp.task("default", function () { paths.forEach(function(path){ var pathArr = path.split("/"); var parent = pathArr.slice(0, pathArr.length - 1).join('/'); var file = pathArr[pathArr.length - 1]; var directory = "./" + (parent ? parent + "/" : ""); gulp.src(directory + file + '.es6') .pipe(sourcemaps.init()) .pipe(babel({ "presets": [ "es2015" ], "plugins": ["transform-es2015-modules-amd"] })) //.pipe(uglify()) .pipe(rename(file + '.js')) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(directory)); }); }); 

Please note that I am using babel 6 here.

I also tried this variation:

 gulp.src(directory + file + '.es6') .pipe(babel({ "presets": [ "es2015" ], "plugins": ["transform-es2015-modules-amd"], "sourceMaps": "both" })) .pipe(rename(file + '.js')) .pipe(sourcemaps.init()) //.pipe(uglify()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(directory)); 

Answer 1

TL; DR; Babel 6 splits the original maps when using the amd transform, going to Babel 5 should do the trick.

I had to wrap my head around uploading files to a stream (you should check the Gulp documentation on gulp.src and its support for file arrays and globes), but I tried to replicate your problem with a simpler version and came to the same result. Here is what I found:

The correct order in the pipe should be as follows:

 gulp.src([...]) // start stream .pipe(rename(function (path) { // rename files based on path path.extname = '.js'; // no need to reach outside the scope })) .pipe(sourcemaps.init()) // sourcemaps now tracks the files passed to it .pipe(babel({ // ...options as above }) .pipe(sourcemaps.write('.')) // adds the sourcemaps to the stream .pipe(gulp.dest(...)); // writes the stream to disk 

Therefore, sourcemaps should display the correct file and contain all the transformations made by Babel.

However, this only works until you add the transform-es2015-modules-amd plugin to the Babel configuration.

There seems to be an open ticket on this, and the only solution at this point is to return to Babylon 5. See T3044 Sometimes useless source maps .