Bundling Map Files With browserify

Problem

I want to bundle .map files with browserify, so that I can debug my TS source code.

Fix

I had the best experience with using tsify npm package with browserify.

You should refer to the tsify npm page for the official description.

An Example

• npm install typescript (You do need the project local typescript)
• npm install browserify (You also need the project local typescript)
• npm install -g browserify (This runs as a command line tool)
• npm install tsify (also this must be local)

Then you can type in the browserify command with -p [ tsify ] with --debug option. This will add the map reference. Maps are still in the project's original place.

In my example, I have the top level app.ts under ./public/typescripts/app.ts and output that as main.js. Do note that you will still have to map all of the .map files from the browser's source mapping feature (this workflow is exactly the same as if you did not use the bundler.) In other words, main.js in the following example does not contain the maps themselves. Just the references just as exactly without bundling.

  browserify public/typescripts/app.ts -p [ tsify ] --debug > public/typescripts/main.js