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

在反编译源地图数据后，似乎只列出./public/js/app.js和相对网址，所有其他文件在我的计算机上都有绝对网址。

{
    "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任务中使用mold-source-map转换为相对路径的绝对路径，解决问题：

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任务：

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/'));
});

尚未找出问题

Browserify源映射仅使根文件可访问（由绝对路径名引起）

2 个答案: