Question

因此，巴贝尔发布了第6版，这是完全不同的。源图不是正确的（点击一个js文件不在chrome开发人员中没有引导我到es6源文件中正确的对应行。）

这是我的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));
    });
});

请注意，我在这里使用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变换时打破了源图，移动Back to Babel 5应该可以解决问题。

我不得不围绕将文件加载到流中的方式（你应该查看gulp.src上的Gulp文档及其对文件和globs数组的支持），但我试图用一个复制你的问题更简单的版本，并得出了相同的结果。这是我发现的：

管道中的正确顺序应如下：

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 Occasional useless source maps。

gulp-sourcemaps不与babel 6合作

1 个答案: