gulp-sourcymaps funktioniert nicht mit babel 6

Question

Also, babel veröffentlichte Version 6, die sich drastisch unterscheidet. Die Quellkarten kommen nicht richtig raus (das Klicken in die a js-Datei führt nicht in chrome-Entwickler zu der entsprechenden Zeile in der es6-Quelldatei).

Hier ist meine 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)); 
    }); 
}); 

Bitte beachte, dass ich babel 6 hier bin mit.

ich auch diese Variante ausprobiert haben:

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 bricht Quellkarten, wenn die Amd-Transformation verwendet wird, und sollte zurück zu Babel 5 gehen.

Ich hatte meinen Kopf herum wickeln, wie Sie Dateien in den Strom laden (Sie sollten für Arrays von Dateien und Kleckse der Gulp Dokumentation auf gulp.src und seine Unterstützung check out), aber ich versuchte, Ihre zu replizieren Problem mit einer einfacheren Version und kam zu dem gleichen Ergebnis. Hier ist, was ich gefunden habe:

Die richtige Reihenfolge im Rohr sollte wie folgt lauten:

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 

Auf diese Weise sollten die sourcemaps auf die richtige Datei Karte und enthalten alle von Babel getan Transformationen.

jedoch nur das funktioniert gut bis Sie die hinzufügen transformations es2015-Module-amd Plugin an die Babel-Konfiguration.

Es sieht so aus als gäbe es ein offenes Ticket in dieser Angelegenheit und die einzige Lösung für jetzt ist es, zurück zu Babel 5 zu gehen. Siehe T3044 Occasional useless source maps.