browserify-shader转换源图问题

Question

我有类似的东西

var bundler = browserify('./www/js/app/main.js', {
    debug: true
});

if (watch) {
    bundler = watchify(bundler);
    bundler.on('update', function(){ bundle(bundler) });
    bundler.on('log', function(message){ $.util.log(message) });
}

bundler.transform(
    babelify.configure({
        sourceMapRelative: 'www/js',
        presets: ['es2015'],
        plugins: ['transform-class-properties']
    })
);

bundler.transform('browserify-shader');

bundler.bundle()
    .on('error',notifier)
    .pipe( source('main.bundle.js') )//vinyl-source-stream
    // .pipe(buffer())
    // .pipe(sourcemaps.init({loadMaps: true }))
    // .pipe( sourcemaps.write('./'))

    .pipe(gulp.dest('./www/js/'));

我确实让源图工作到了一定程度。断点和日志在某些地方起作用，但在某些地方，它们指向随机文件和随机行是错误的。我做错了什么？

修改

我注意到当我弄乱require调用时文件/行会改变。我有一些甚至没有设置为模块的东西，大多数断点都指向那个。一旦我删除它，它现在指向另一个有需求的es6类，有些日志甚至来自着色器文件。

var crossFadeMaterial = new THREE.ShaderMaterial({

uniforms:{
    uTexA:{
        type:'t',
        value:null
    },
    uTexB:{
        type:'t',
        value:null
    },
    uFade:{
        type:'f',
        value:0
    }
},
vertexShader: require('./crossFade.vert')(),
fragmentShader: require( './crossFade.frag')()

});


export default class CrossFadePlane extends THREE.Mesh {

constructor(){

    super( pg , crossFadeMaterial.clone() );
    console.log('foo',this);
}
...

我得到了正确的输出，但来自一个完全错误的文件（甚至不是所需的文件，但巧合的是同一行）

vertexShader: require('./crossFade.vert')(),

编辑2

所以它的浏览器着色器似乎搞乱了。我删除了对着色器的所有require调用，现在正确映射了日志。