source maps should be exportable to file #339

Closed
matthiasg opened this Issue Mar 22, 2013 · 17 comments

Projects

None yet

9 participants

@matthiasg

while i appreciate the recent addition of the --debug option to add source maps into the file as base64 it would be nice to have an option of writing it to a file instead.

If that where possible tools like uglify js could use it as an input to create their own source maps on top and we could have source maps all the way back from minified code to the original sources.

@andreypopp
Contributor

I'd rather introduce a change to uglify to use inlined source maps.

@matthiasg

of course that might be an option too, but external source maps have the advantage (like symbol files for binaries) that you can keep them around at no cost even in production and call upon them when you need them.

Also support for external maps is already often available where inlined source maps would then also have to be extended to other tools like coffeescript etc...

@thlorenz
Collaborator

You can use mold-source-map to do this as a post bundle step.

This example demonstrates how.

@kawanet
kawanet commented Jun 15, 2013

+1

  --source-map       Specify an output file where to generate source map.
                                                                        [string]
  --source-map-root  The path to the original source to be included in the
                     source map.                                        [string]
  --source-map-url   The path to the source map to be added in //#
                     sourceMappingURL.  Defaults to the value passed with
                     --source-map.                                      [string]
@andreypopp andreypopp referenced this issue in facebook/react Sep 10, 2013
Closed

Create sourcemaps for the build #334

@michael-benin-CN

If you look at other projects in the past which do something similar as browserify such as Uglify and Closure, they have options to generate an external map file.

I prefer this because for my production build I don't want to server it with the comments.

Specifically I'd like to have this so I can configure my production build with rollbar.
rollbar/rollbar.js#14

@drkibitz

+1

@thlorenz
Collaborator

In the discussions with @substack prior to me implementing source maps for browserify we agreed that a simpler API is to be preferred over this feature.

The only way to keep the API simple is to just create the source map including sources and attach them to the bottom of the bundle.

IMHO this was a good decision as it makes it so easy to get going with browserify and makes tool integration (zuul, beefy) much simpler.
I would highly recommend not changing anything about this especially given the fact that simple solutions exist.

I mentioned the mold-source-map module above, but even with the slightly lower level convert-source-map module it should be fairly trivial to extract a source map file, similar to this:

var convert = require('convert-source-map');
// assuming src is the source of the bundle with source maps at the bottom

var json = convert
  .fromSource(src)
  .toJSON();

src = removeComments(src) + '\n//# sourceMappingURL=' + path.basename(mapfilePath);
fs.writeFileSync(mapfilePath, json);
@substack
Owner

@thlorenz Can mold-source-map also include a bin script so that people can do mold-source-map bundle.js --url=blah --root=/blah? Then I can add a one-liner to the browserify docs about how to extract the source map info to a separate file. Closing this issue for now because other tools should take care of exporting source maps to files.

@substack substack closed this Jan 15, 2014
@thlorenz
Collaborator

@substack I'll most likely just publish a separate module whose sole concern is extracting source maps into a separate file.
It'll have a cmd as well and will support something similar to the API @kawanet suggested.

I'm a bit swamped atm, but will ping you once it's done -- promising this by the beginning of next week, so hold me to it ;)

@michael-benin-CN

"The only way to keep the API simple is to just create the source map including sources and attach them to the bottom of the bundle."

If you want a simple api, @kawanet commented a very simple way this could be exposed.

@thlorenz
Collaborator

@michael-benin-CN and as I outlined I'll make that tool, but browserify API needs to stay as simple as it is.
If it would provide all options for every feature it has it would soon have a much higher learning curve than it has now and the code become more convoluted than it needs to be.

@michael-benin-CN

Can't wait for the tool.

I can't see why anyone who is using browserify for a production build wouldn't want this.

Looking forward to it. @thlorenz

@thlorenz
Collaborator

In the meantime I'd like to also point out minifyify which creates a minified bundle with inlined source maps.
In some cases that may be what people want.

@thlorenz
Collaborator

So as promised I released exorcist which should do what you want.

Any extra related features should be discussed and possibly implemented in that repo.

@michael-benin-CN

Just wanted to update this thread for anyone wanting a production build in browserify with a sourcemap. Our current js build is 10mb and 2mb gzipped. After Uglify compression and gzip we were able to get it down to 347kb. We used Uglify's ability to input a source map. Here is what it ended up looking like:

b.bundle({
  debug: true
}).pipe(exorcist(exorcistMapFile, url, ''))
  .on('data', function (chunk) {
    data += chunk;
  })
  .on('end', function () {
    data = UglifyJS.minify(data, {
      fromString: true,
      warnings: false,
      inSourceMap: exorcistMapFile,
      outSourceMap: sourceMapFile
    });

    var js = data.code + '\n //# sourceMappingURL=/sourceMapBundle.js.min.map';
    fs.writeFile(jsFile, js);
    var oldMap = require(exorcistMapFile);
    var map = JSON.parse(data.map);
    map.sourcesContent = oldMap.sourcesContent;
    map = JSON.stringify(map);
    fs.writeFile(sourceMapFile, map);
   // done(); // for grunt
  });
  });
@ben-ng
ben-ng commented May 15, 2014

I've just updated minifyify to support browserify 4 and inline source maps such as those generated by coffeeify.

It'll externalize a source map for you that maps all the way back to the pre-bundled files.

The minifyify API isn't as clean as I'd like it to be, but I understand the desire to keep browserify as simple as possible so I had to work around the limitations.

@polkovnikov-ph

I'm not sure if exorcist will quite cut it, because there're important tools like watchify, and it's not very obvious how to use exorcist with them. Personally I'd prefer a browserify plugin solution.

I've just asked author of exorcist if there's an obvious solution I miss. thlorenz/exorcist#25

@jgimbel jgimbel referenced this issue in LiveBy/embedded-widgets Jan 4, 2016
@Malachi-M Malachi-M Added Browserify functionality to create a js bundle from 'src/iframe…
….js' resulting in '.buld/embed-liveBy.js'
059511e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment