Uglifyjs: allow inlined source maps in compiled JS

[jonathanong]

i don't see an option for that. glancing at the code, it seems like you only read it as a file

[dominicbarnes]

+1 It would be great to see better inline source-map support in general (should automatically detect from source and then write to output)

[jasonkarns]

(copying my comment from #780)

+1 to this. Perhaps just passing the --in-source-map flag without a parameter could be used to tell uglify that there is an input sourcemap, but it's not external.

[sprat]

+1 too

[soluml]

+1

[homerjam]

+1

[jessehattabaugh]

+1

[rvanvelzen]

Please refrain from adding "+1" comments. You can show your interest by subscribing / reacting.

[OmgImAlexis]

@jasonkarns any updates on this?

[kzc]

It would be great to see better inline source-map support in general (should automatically detect from source and then write to output)

Those wishing to have this feature would have to implement it. It's less than an hour of work.

It would have to be implemented in minify() (tools/node.js) and the CLI (bin/uglifyjs).

[kzc]

@alexlamsl If you have spare cycles and the inclination, this is one of the more requested features.

[alexlamsl]

@kzc I've never used source maps on any languages before - can you elaborate on what is the expected input/output of this feature? 😅

[kzc]

I don't use source maps either, but this is what an inline source map looks like:

$ echo "class Foo { constructor(){console.log(1+2);} } new Foo();" | buble --sourcemap inline

var Foo = function Foo(){console.log(1+2);}; new Foo();

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbInN0ZGluIl0sInNvdXJjZXNDb250ZW50IjpbImNsYXNzIEZvbyB7IGNvbnN0cnVjdG9yKCl7Y29uc29sZS5sb2coMSsyKTt9IH0gbmV3IEZvbygpO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLElBQU0sR0FBRyxHQUFDLEFBQUUsWUFBVyxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFBLEFBQUUsQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDOyJ9

It's more interesting when the original source is a different language, so I used buble to transpile ES6.

If you base64 decode the output above you get:

$ node -p "Buffer('eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbInN0ZGluIl0sInNvdXJjZXNDb250ZW50IjpbImNsYXNzIEZvbyB7IGNvbnN0cnVjdG9yKCl7Y29uc29sZS5sb2coMSsyKTt9IH0gbmV3IEZvbygpO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLElBQU0sR0FBRyxHQUFDLEFBQUUsWUFBVyxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFBLEFBQUUsQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDOyJ9', 'base64').toString()"

{"version":3,"file":null,"sources":["stdin"],"sourcesContent":["class Foo { constructor(){console.log(1+2);} } new Foo();\n"],"names":[],"mappings":"AAAA,IAAM,GAAG,GAAC,AAAE,YAAW,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,AAAE,CAAC,IAAI,GAAG,EAAE,CAAC;"}

which can be JSON.parse()d and fed to UglifyJS.SourceMap() through the orig: parameter.

If the command line option --in-source-map is specified with an argument of inline then it would indicate that the source map will come from the source code string itself using a fancy regex. Uglify should verify that there is only a single JS input file (whether an actual file or stdin).

If it is implemented correctly then the command:

$ echo "class Foo { constructor(){console.log(1+2);} } new Foo();" | buble --sourcemap inline | uglifyjs - -cm toplevel --in-source-map inline --source-map-inline

should produce something like:

var n=function(){console.log(3)};new n;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0ZGluIl0sIm5hbWVzIjpbIkZvbyIsImNvbnNvbGUiLCJsb2ciXSwibWFwcGluZ3MiOiJBQUFBLEdBQU1BLEdBQUksV0FBZ0JDLFFBQVFDLElBQUksR0FBUyxJQUFJRiIsInNvdXJjZXNDb250ZW50IjpbImNsYXNzIEZvbyB7IGNvbnN0cnVjdG9yKCl7Y29uc29sZS5sb2coMSsyKTt9IH0gbmV3IEZvbygpO1xuIl19

which when base64 decoded looks like this:

{"version":3,"sources":["stdin"],"names":["Foo","console","log"],"mappings":"AAAA,GAAMA,GAAI,WAAgBC,QAAQC,IAAI,GAAS,IAAIF","sourcesContent":["class Foo { constructor(){console.log(1+2);} } new Foo();\n"]}

[alexlamsl]

@kzc thanks for detailed explanation. Will have a go at it when I get home :+1:

[kzc]

Probably took twice as long to write the explanation as it would to code it. :-)

[Forkest]

@alexlamsl, thanks for implementing this.

What about the documentation update? Or is it usually updated together with a new version release?