Browserify源映射只使根文件可访问(由绝对路径名引起)

Question

我要编译我的客户端代码：

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的source选项卡中。app.js中需要的所有文件都丢失了。

在对源地图数据进行反编译之后，似乎只有./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

问题是源地图中的绝对路径。在我的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'));
});

Answer 2

我也有类似的问题，但在我的例子中，源地图甚至不包含绝对路径；它只有根文件的一个条目。

我来自.map的消息来源：

"sources":["theSrc/internal_www/js/renderContentPage.js"]

我的任务是：

gulp.task('compileRenderContentPage', function () {

    var b = browserify({
      entries: 'theSrc/internal_www/js/renderContentPage.js',
      debug: true
    });

    return b.transform(babelify, { presets: ['es2015'] })
      .bundle()
      .pipe(source('renderContentPage.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true}))
      .on('error', gutil.log)
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./browser/js/'));
});

这个问题还没有弄清楚