错误的Javascript sourcemap测绘2017年

Question

我已经创建了一个新的项目在2017年VS 我使用的WebPack捆绑的JS文件。 我webpack.config.js文件 -

module.exports = { 
    entry: "./app.js", // bundle's entry point 
    output: { 
     path: __dirname + "/dist", // output directory 
     filename: "index_bundle.js" // name of the generated bundle 
    }, 
    devtool: "source-map" 
}; 

我从Visual Studio试图调试铬。 如果我在index_bundle.js文件上放置一个断点 - 它工作的很好，它停在断点处，它甚至将它映射到正确的文件。 当我尝试把一个破发点上的原始js文件的问题发生。例如app.js - 它会尝试放在引导14248a9c8b87e0f9032f文件断点 - 这是错误的文件。 我认为VS读取地图文件时有问题。这里是地图文件我创建：

{ 
    "version": 3, 
    "sources": [ "webpack:///webpack/bootstrap 14248a9c8b87e0f9032f", "webpack:///./funcs.js", "webpack:///./app.js" ], 
    "names": [], 
} 

好像它试图把断点上引导文件的相对行原始文件的压制。 （例如，如果我是交换在与app.js条目映射文件的引导入口 - 它似乎把断点在正确的地方） （顺便说一句，我没有把所有的映射文件的内容 - 它太长，没有把映射，sourceContent，文件和sourceRoot条目）

Answer 1

我跑过类似的问题，但我们使用browserify而不是webpack。本周，我有机会在BUILD的VS2017开发团队与开发人员交谈，他表示，一个简单的检查就是确保Edge可以在Debugger视图中看到原始文件。如果是这样，源地图正在正确生产。

就我而言，我有几个问题。下面是我使用的工具集：

• browserify
• gulp-sourcemaps
• uglify

我gulp任务看起来如下：

gulp.task('build:debug:js', function() { 
    return browserify('./wwwroot/js/site.js', { debug: true }) 
     .transform("babelify", { presets: ["es2015"] }) 
     .transform(stringify, { 
      appliesTo: { includeExtensions: ['.html'] } 
     }) 
     .bundle() 
     .pipe(source('site.min.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(uglify()) 
     .pipe(sourcemaps.write('.', { 
      sourceMappingURL: function(file) { 
       return file.relative + '.map'; 
      } 
     })) 
     .pipe(gulp.dest('./wwwroot/js')) 
     .pipe(connect.reload()); 
}); 

我碰巧使用非常旧版本的gulp-sourcemaps（1.7 0.1）。最终做的是在缩小的JavaScript文件末尾生成源映射评论，而不是换行。此外，文字null出现在.map之后，这使浏览器无法看到源图文件。一旦我升级到最新的gulp-sourcemaps（2.6.0），它确保源代码评论位于文件的最后一行，最后没有null。

的第二个问题是越来越Visual Studio中知道来源的正确定位。如下为我的项目看路径：

• app文件夹
  • wwwroot的
  • JS
    • site.min。JS
    • site.min.js.map
    • release_dashboard.js

当托管，JavaScript的是要/js/site.min.js访问，不/wwwroot/js/site.min.js。然而，在这个时候，sourcemaps看上去像下面这样：

{ 
    "version":3, 
    "sources":[ 
    "node_modules/browser-pack/_prelude.js", 
    "wwwroot/js/release-dashboard.html", 
    "wwwroot/js/release-dashboard.js", 
    "wwwroot/js/site.js" 
    ], 
    "names":[], 
    "mappings":"SNIP", 
    "file":"site.min.js" 
} 

因此，我不得不使用下面的一口任务得到它删除wwwroot和点sourceroot一个目录：

gulp.task('build:debug:js', function() { 
    return browserify('./wwwroot/js/site.js', { debug: true }) 
     .transform("babelify", { presets: ["es2015"] }) 
     .transform(stringify, { 
      appliesTo: { includeExtensions: ['.html'] } 
     }) 
     .bundle() 
     .pipe(source('site.min.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(sourcemaps.mapSources(function (sourcePath, file) { 
      return sourcePath.replace('wwwroot/', ''); 
     })) 
     .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../' })) 
     .pipe(gulp.dest('./wwwroot/js')) 
     .pipe(connect.reload()); 
}); 

这产生了sourcemap看起来像以下：

{ 
    "version":3, 
    "sources":[ 
    "node_modules/browser-pack/_prelude.js", 
    "wwwroot/js/release-dashboard.html", 
    "wwwroot/js/release-dashboard.js", 
    "wwwroot/js/site.js" 
    ], 
    "names":[], 
    "mappings":"SNIP", 
    "file":"site.min.js", 
    "sourceRoot":"../" 
} 

有了这个，Chrome浏览器把它捡起来没有问题，所以没有Visual Studio的！