gulp-sourcemaps not working with babel 6

Question

So, babel published version 6 which is drastically different. The sourcemaps are not coming out right (clicking in the a js file does not in 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));
    });
});

Note that I am using babel 6 here.

I have 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

TLDR; Babel 6 breaks sourcemaps when using the amd transform, moving Back to Babel 5 should do the trick.

I had to wrap my head around the way you load files into the stream (you should check out the Gulp documentation on gulp.src and its support for arrays of files and globs), but I tried to replicate your problem with a more simple version and came to the same result. Here is what I found:

The right 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

This way, the sourcemaps should map to the correct file and contain all transforms done by Babel.

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

It looks like there is an open ticket regarding that matter and the only solution for now is to go back to Babel 5. See T3044 Occasional useless source maps.