Using banner option results in an incorrect source-map

[viddo]

Really the same issue as @lcrespom wrote on the merged&closed PR #253, just creating a separate issue for this:

When using the banner option in combination with source maps, the banner option adds a line without updating the source map.

This results in all source code to be one line away from its real position, or more if the banner has multiple lines.

Sounds like a bug to me, does anyone have a solution/workaround for this?

[viddo]

Looking into the code, the problem is that the banner is added after the bundle is created (and thus the source-map) which explains why the source code appears to be offset from the real position.

I don't know browserify internals enough to give a solution right now, but imagine the banner should be added to the buffer earlier on, probably before creating the source-map.

[viddo]

Having a quick look, a better solution would probably be to change the browerify bundle pipeline (could probably be done in the prebundlecb option) and inject a "banner" handler before the debug handler to add the banner.

If I get some time over later I'll have a 🔪 at this.

[viddo]

To whoever who encounters this issue here is a workaround until I get time to implement a PR, or if someone beats me to it 🙏

Provide a custom prelude option, it's passed to the pack transform in the pipeline, which is where the source-map is adapted to the surrounding wrapper code, see https://github.com/substack/browser-pack/blob/master/index.js#L35-L39

var path = require('path');
var defaultPreludePath = grunt.file.read(
  path.join('node_modules', 'browserify', 'node_modules', 'browser-pack', '_prelude.js')
);
  ...

  browserifyOptions: {
    debug: true, // to generate source maps
    prelude: [
      '// the custom header',
      '// another line',
      defaultPreludePath
    ].join("\n")

    ...

[WickyNilliams]

I've just encountered this problem also.

I worked around it by adding a banner only in my production build, and enabling source maps only in my dev build. This met my needs, since I don't want source maps in production and I don't care about a banner when i'm developing.

Hopefully this is helpful to someone :)