I needed to make relatively minor changes to a JavaScript project created by someone else. They use minimized files, but I found that they don’t have a source map, they just click “unminify” in Chrome and are happy with the resulting goo. The project uses npm, browserify, and uglifyjs.<\/p>\n
My attempts to build proper source map failed miserably: one thing kept leading to another, and in the end I hit dead-end. Since there are two code transformations (browserify + uglify), we need a recursive source map. If I use just uglify’s source map, it would point to the bundle generated by browserify, which is better than nothing, but still not the original source code. So, I needed to use the My final, almost working variant looked like this:<\/p>\n Here are the problems I solved:<\/p>\n 1. Uglifyjs won’t generate source map if input is coming form stdin. So, explicit intermediate files are required. Here is the problem I did not solve: browserify puts some crazy relative paths into the source map like I was unable to find a combination of options that would prevent it. I toyed with Unminified goo in Chrome, here I come!<\/p>\n","protected":false},"excerpt":{"rendered":" I needed to make relatively minor changes to a JavaScript project created by someone else. They use minimized files, but I found that they don’t have a source map, they […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[1],"tags":[],"class_list":["entry","author-ikriv","post-2104","post","type-post","status-publish","format-standard","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2104"}],"version-history":[{"count":0,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2104\/revisions"}],"wp:attachment":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}--in-source-map<\/code> feature.<\/p>\nbrowserify src\/js\/DataModule.js -d | exorcist -b . dist\/generated.js.map >dist\/generated.js && uglifyjs --compress --source-map dist\/module.min.js.map --in-source-map dist\/generated.js.map dist\/generated.js > dist\/module.min.js<\/code><\/p>\n
\n2. Browserify cannot generate external source maps. Uglify only understands external source maps. Exorcist tool is needed to bridge the gap.
\n3. Exorcist always sets ‘file’ field of the source map to ‘generated.js’. Uglifyjs complains that ‘generated.js’ is not found, unless your browserify bundle is actually named ‘generated.js’. Oh, well.<\/p>\n..\\\\..\\\\..\\\\..\\\\Users\\\\ikriv\\\\Documents\\\\ivan\\\\dev\\\\work\\\\datamodule\\\\src\\\\js\\\\LoadModules.js<\/code> while I am running it from c:\\users\\ikriv\\documents\\ivan\\dev\\work\\datamodule<\/code>, so this ugly path is totally uncalled for.<\/p>\ncross-env NODE_PATH=... browserify...<\/code>, but then gave up on the idea, since the playing time was up, and I needed to do some actual changes.<\/p>\n