gulp - Browserify source map 仅使根文件可访问(由绝对路径名引起)

Question

我有以下 gulp 任务来编译我的客户端代码:

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var reactify = require('reactify');

gulp.task('compile', function() {
  return browserify('./public/js/app.js', {transform: reactify, debug: true})
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./public/dist'));
});

问题是只有根 ./public/js/app.js 文件显示在 chrome 的源选项卡中。 app.js 中所需的所有文件都丢失了。

反编译source map数据后，似乎只有./public/js/app.js列出了相对url，所有其他文件在我的机器上都是绝对url。

{
    "version": 3,
    "sources": [
        "/Users/andreaskoberle/projects/private/webshell/node_modules/browserify/node_modules/browser-pack/_prelude.js",
        "./public/js/app.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/cockpits/index.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/cockpits/links.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/common/Box.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/common/Grid.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/sidebar.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/webShell/ScriptSelector.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/webShell/ShellOutput.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/webShell/index.js"
    ],

Answer 1

问题是源映射中的绝对路径。使用 mold-source-map在我的转换为相对路径的绝对路径的 gulp 任务中，解决了这个问题:

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var reactify = require('reactify');
var mold = require('mold-source-map')

gulp.task('compile', function() {
  return browserify('./public/js/app.js', {transform: reactify, debug: true})
    .bundle()
    .pipe(mold.transformSourcesRelativeTo('./'))
    .pipe(source('app.js'))
    .pipe(gulp.dest('./public/dist'));
});