Keep original typescript source maps after using browserify

Question

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 1

tsify is a browserify plugin that is better and replaces e.g. typescriptifier.

npm install tsify browserify watchify

You use tsify like this:

browserify src/index.ts -p tsify --debug -o build/index.js

Notice that this supports browserify --debug switch, no extra tricks required. So you can also use it with watchify like this:

watchify src/index.ts -p tsify --debug -o build/index.js

Answer 2

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