gulp-sourcemaps non funziona con babele 6

Question

Quindi, Babel ha pubblicato la versione 6 che è drasticamente diversa. Le sourcemaps non stanno uscendo correttamente (facendo clic nel file js non lo sviluppatore di Chrome non mi conduce alla riga corrispondente corretta nel file di origine es6).

Ecco il mio 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)); 
    }); 
}); 

Nota che sto usando babele 6 qui.

Ho anche provato questa variante:

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 rompe le papere in caso di utilizzo della trasformazione amd, spostando Torna a Babel 5 dovrebbe fare il trucco.

ho dovuto avvolgere la mia testa intorno al modo in cui si caricano i file nel flusso (si dovrebbe verificare la documentazione Gulp sul gulp.src e il suo supporto per gli array di file e gocce), ma ho cercato di replicare il vostro problema con una versione più semplice e arrivò allo stesso risultato. Ecco cosa ho trovato:

Il giusto ordine nel tubo dovrebbe essere la seguente:

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 

In questo modo, i sourcemaps dovrebbero mappare il file corretto e contengono tutte le trasformazioni fatte da Babel.

Tuttavia, questo funziona solo bene fino si aggiunge il plugTransform-es2015 moduli-amd alla configurazione Babel.

Sembra che ci sia un biglietto aperto in merito e l'unica soluzione per ora è tornare a Babel 5. Vedi T3044 Occasional useless source maps.