gulp源代码地图不使用babel 6

Question

因此，babel发布了完全不同的版本6。源文件没有正确显示(在js文件中单击一个js文件，在chrome中没有引导我找到es6源文件中正确的对应行)。

这是我的吞咽文件：

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

请注意，我在这里使用babel 6。

我也尝试过这种变体：

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文档及其对文件和全局数组的支持)，但是我尝试用一个更简单的版本复制您的问题，并得到了同样的结果。以下是我的发现：

管道的正确顺序应如下：

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

这样，源地图应该映射到正确的文件，并包含由Babel完成的所有转换。

但是，在将transform-es2015-modules-amd插件添加到Babel配置之前，这才能正常工作。

关于这个问题，似乎有一张公开的门票，目前唯一的解决办法是回到Babel 5。参见T3044偶尔无用的源映射。