When I use the gulp-sourcemaps
plugin, I typically have both the comment and content removed so the sourcemap header is used instead. This makes it much easier to show the original files in the browser debugger in development and staging, then remove it in production. We also try to load sourcemaps wherever possible, mostly for vendor libraries.
This works fine for the most part. However, intermediate files seem to be lost. I am guessing the loadMaps
option to sourcemaps.init()
, which allows for loading existing maps, removes the intermediate files when it gets their maps. This is likely fine for most cases, as the original files are there, but too often libraries only include the output file with maps added as a comment, but don't include those original files. This means we don't have access to the original files, and the browser does not have access to the built library file.
For example, angular-ui-router
is written with TypeScript, then output to JavaScript when built. This means the end developer does not have to compile with TypeScript in his/her build process, as this is already done in the ui-router
build process. Now, the output JavaScript file is accessible at <server root>/node_modules/@uirouter/angularjs/release/angular-ui-router.js
, and the original TypeScript files were, according to the built file's sourcemap comment, in the <server root>/node_modules/@uirouter/angularjs/node_modules/@uirouter/core/src
and <server root>node_modules/@uirouter/angularjs/src
folders.
When I include the angular-ui-router
file into a vendor.js
or vendor.min.js
file using my favorite tool, it bundles the angular-ui-router
maps into the resulting .map
file, but does not include the <server root>/node_modules/@uirouter/angularjs/release/angular-ui-router.js
file as a source. This means we can't see either that file, or the TypeScript files, which makes debugging pretty much impossible using only the browser. To make matters worse, any errors we get are sourcemapped all the way back to the TypeScript files. We don't have the TypeScript files, so we can't look there, and now we don't know where in the JavaScript the error is, either! Thankfully, angular-ui-router
doesn't have many complex errors, and the ones it does have are nicely documented, but other libraries are not so helpful.
Is there a way to include intermediate files as sources in the output sourcemap?
Otherwise, is there an easy way to load some sourcemaps with something like loadMaps
, but not others?