Preserve original sourcemap with Browserify - browserify

Question

Suppose I have a module whose source code is not ECMA 5 (e.g. it's Coffescript or Typescript or whatever) and is distributed in compiled form with a source map. How can I include this source map in a Browserify bundle?
For example imagine a project with a single dependency:
index.js
node_modules
typescript_module
(main.ts)
dist
main.js
main.js.map
The "main.js.map" is not consumed by browserify. That is, the browserify bundle source map maps to "main.js" instead of deferring to the original map which describes "main.ts"
For most transforms, there is a way to input source maps generated by the prior step, but is there a way to just preserve them on the original input files, when source maps already exist?

Answer 1

This appears to be a bug/non-feauture of Browserify:
https://github.com/substack/node-browserify/issues/772
Answering my own question because it's very hard to track down any discussion of this issue with google and no mention of it in the Browserify docs.

Answer 2

My setup is the following:
tsc --project tsconfig.script.json --outDir ~temp/ts
Compiles src/script.ts to ~temp/ts/script.js and ~temp/ts/script.js.map.
browserify ~temp/ts/script.js --debug | exorcist --root ../../ ~temp/bfy/script.js.map > ~temp/bfy/script.js
Compiles ~temp/ts/script.js to ~temp/bfy/script.js and ~temp/bfy/script.js.map.
sorcery --input ~temp/bfy/script.js --output dist/script.js
Reads ~temp/bfy/script.js; finds ~temp/bfy/script.js.map + ~temp/ts/script.js.map, and finally outputs dist/script.js and dist/script.js.map.
The dist/script.js.map file does reference the original src/script.ts file.
Requires Browserify, Exorcist and Sorcery (and of course CoffeeScript or TypeScript or whatever).

Answer 3

If you are using a TypeScript library that you have control over (for example in a lerna monorepo), you can enable the following compilerOptions in tsconfig.json:
{
"compilerOptions": {
"sourceMap": false,
"inlineSourceMap": true,
"inlineSources": true,
// ...
}
}
browserify should now use and transform the inlined source maps.
browserify will not read source maps that reference another file, it will only use inlined source maps with inlined sources. I have written about this in the referenced issue on GitHub browserify/browserify#772.
Alternatively, if you do not have control over the source of the TypeScript library, but you would still like to see the original source in DevTools, you can use the sourceify library someone mentioned in another answer. However, I had to patch it to work and I submitted a pull request. It hasn't been merged yet (at the time of writing this). If you wish to test it yourself, you can install it directly from my branch:
npm install https://github.com/jeremija/sourceify#sources-content
Make sure to use the global transform -g [ sourceify ], because the default transform (-t) in Browserify does not modify files in node_modules.

Answer 4

Have a look at sourceify.
Just install it:
npm i --save-dev sourceify
... and add it as a transform to package.json:
"browserify": {
"transform": [
"sourceify"
]
}
... and it Just Works.

Answer 5

Try the following:
var gulp = require("gulp"),
browserify = require("browserify"),
tsify = require('tsify'),
source = require("vinyl-source-stream"),
sourcemaps = require("gulp-sourcemaps"),
buffer = require("vinyl-buffer"),
uglify = require("gulp-uglify"),
header = require("gulp-header");
var settings = {
projectName : "test"
};
gulp.task("bundle", function() {
var mainTsFilePath = "src/main.ts";
var outputFolder = "bundle/src/";
var outputFileName = settings.projectName + ".min.js";
var pkg = require("./package.json");
var banner = [
"/**",
" * <%= pkg.name %> v.<%= pkg.version %> - <%= pkg.description %>",
" * Copyright (c) 2015 <%= pkg.author %>",
" * <%= pkg.license %>",
" */", ""
].join("\n");
var bundler = browserify({
debug: true,
standalone : settings.projectName
});
// TS compiler options are in tsconfig.json file
return bundler.add(mainTsFilePath)
.plugin(tsify)
.bundle()
.pipe(source(outputFileName))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.pipe(header(banner, { pkg : pkg } ))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(outputFolder));
});
Note: change the paths to match your project!