Question

我正在使用gulp使用Babel 6转换JS，然后将所有文件连接到一个（没有任何类型的uglify，只加入文件）。但是，为了允许我调试应用程序，我需要正确的源映射，尤其是从Babel转换而来的代码。不幸的是，源地图永远看起来不正确，因为浏览器上的断点（例如Chrome或Firefox）与实际代码不匹配。

我在gulp上使用以下代码：

return gulp.src( [].concat( FOLDERS.SOURCE.LIBS, FOLDERS.SOURCE.MODULES, FOLDERS.SOURCE.APP ) , {base: __dirname})
        .pipe( plumber() )
        .pipe( sourcemaps.init({loadMaps: true}) )
        .pipe( gulpif ( notLib, babel( {
            presets: [ 'es2015', 'stage-3' ],
            sourceMaps: "both"
        } ) ) )
        .pipe( replace("'use strict';", ""))
        .pipe( concat( FOLDERS.TARGET.DEVELOPMENT, {
         newLine: ';'
         } ) )
        .pipe( sourcemaps.write( './', {
            //addComment: true,
            sourceMappingURL: function (file){
                return path.basename(file.relative) + '.map?t=' + new Date().getTime();
            }
        }))
        .pipe( gulp.dest( FOLDERS.TARGET.DEV ) );

FOLDERS.SOURCE的每个元素都是js文件的路径数组。 notLib是一个简单的函数，它将确保外部库不会在babel下传递（在这种情况下会导致一些错误）。

有人可以帮我理解可能出错的地方吗？即使如果我评论concat代码，生成多个文件，并在页面上引用它们，一些静止图像的源图也不正确。

使用Babel.js并使用gulp连接生成的源映射是不正确的

0 个答案: