gulp-sourcemaps不与babel 6合作

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

太长了；Babel 6 在使用 amd 转换时会破坏源映射，回到 Babel 5 应该可以解决问题。

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

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

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 偶尔无用的源地图。