バーコードと連携していないgulp-sourcemaps 6

Question

したがって、babelは大幅に異なるバージョン6を公開しました。ソースマップが正しく表示されない（jsファイルをクリックしてもchrome開発者がes6ソースファイルの正しい行に移動しない）。私はここにバベル6を使用しています

"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)); 
    }); 
}); 

注：

は、ここに私のgulpfileです。

私も、この変化しようとしている：

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は、amd変換を使用しているときにソースマップを壊し、Babel 5に戻るとそのトリックを実行する必要があります。

私は（あなたがgulp.srcファイルやグロブの配列のサポートにがぶ飲みのドキュメントをチェックアウトする必要があります）あなたがストリームにファイルをロードする方法のまわりで私の頭をラップする必要がありましたが、私はあなたを複製しようとしましたより単純なバージョンで問題が発生し、同じ結果になりました。ここで私が見つけたものです：

次のようにパイプ内の正しい順序は次のようになります。

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 

この方法では、sourcemapsは、正しいファイルにマップし、バベルで行われるすべての変換が含まれている必要があります。

しかしこれは、あなたがバベル構成に変換-es2015-モジュール - AMDプラグインを追加まで正常に動作します。

この問題に関する公開チケットがあるようですが、今は唯一の解決策はバベル5に戻ることです。T3044 Occasional useless source mapsを参照してください。