Eran Medan Eran Medan - 4 months ago 29
Javascript Question

Keep original typescript source maps after using browserify

Background: I am compiling 2 dependent TypeScript files to js, which produces also source maps (one source map per file) using tsc 1.0

I'm using

-m commonjs
and then use browserify to generate a single
bundle.js


However I noticed that I get the original source map references twice in the bundle, which doesn't seem to work.

Passing
--debug
doesn't seem to do the trick either.

I had a feeling this issue: https://github.com/substack/node-browserify/issues/325 is somewhat related, but I couldn't figure out how the issue was resolved.

Also https://github.com/substack/browser-pack was suggested, but again I don't fully understand how to use it, is it a replacement to browserify?

Bottom line, I would like to merge the 2 js files but "merge" the js to ts source maps using browserify. Is that possible?

Answer

Using the minifyify browserify plugin I believe you can use TypeScript with Browserify and retain the source maps. After compiling the TypeScript files you should be able to pass the "entry" file (the one that imports the other one via commonjs syntax) through browserify with the minifyify plugin.

var browserify = require('browserify'),
    bundler = new browserify();

bundler.add('entry.js');
bundler.plugin('minifyify', {map: 'bundle.js.map'});
bundler.bundle({debug: true}, function (err, src, map) {
  if (err) console.log(err);
  fs.writeFileSync('bundle.js', src);
  fs.writeFileSync('bundle.js.map', map);
});
Comments