Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preserve original sourcemap with Browserify

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?

like image 967
Jamie Treworgy Avatar asked Sep 09 '15 17:09

Jamie Treworgy


1 Answers

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.

like image 112
jeremija Avatar answered Nov 20 '22 06:11

jeremija