When we write the code (often JavaScript in this case), we create a source. The source code looks the way we first input it.
But when we serve the code, often we don't want to send the "source" code to the end user, we send a compressed version. Things like "UglifyJS" turn the code we write, changing all the variables into single letter vars and remove all the whitespace in the file. What we end up is code that behaves the same way but is shipped to the end use in fewer bytes. This means faster webpages. Overall we try to send as little data as possible if we can help it.
UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.
Note:
uglify-js supports JavaScript and most language features in ECMAScript.
For more exotic parts of ECMAScript, process your source file with transpilers
like Babel before passing onto uglify-js.
uglify-js@3 has a simplified API and CLI
that is not backwards compatible with uglify-js@2.
Install
First make sure you have installed the latest version of node.js
(You may need to restart your computer after this step).
From NPM for use as a command line app:
npm install uglify-js -g
From NPM for programmatic use:
npm install uglify-js
Command line usage
uglifyjs [input files] [options]
UglifyJS can take multiple input files. It's recommended that you pass the
input files first, then pass the options. UglifyJS will parse input files
in sequence and apply any compression options. The files are parsed in the
same global scope, that is, a reference…
We also use transpilers such babelJS, which let us write more "modern" javascript features and compile them into code which works across all browsers, even the older ones.
🐠 Babel is a compiler for writing next generation JavaScript.
The compiler for writing next generation JavaScript
Supporting Babel
Babel (pronounced "babble") is a community-driven project used by many companies and projects, and is maintained by a group of volunteers. If you'd like to help support the future of the project, please consider:
Giving developer time on the project. (Message us on Twitter or Slack for guidance!)
Giving funds by becoming a sponsor on Open Collective or GitHub (which goes to our Open Collective account)!
Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.
But what happens if we ever want to go back in the other direction, perhaps to debug? Now we have to map the compressed or compiled code back to the source. It's a series of instructions that can help turn things back into source code if we need it. If a sourcemap is created, there's probably an associated tool that knows how to interpret the sourcemap.
I think that's the gist, if anyone thinks I made a mistake, let me know!
Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
Hi ben! I'm slightly confused: what kind of situation is that where you need to debug and you only have an uglified version of your code, and not the original source?
It's when something good wrong on production sure, but your code has been minified to one line, very hard to figure out what's going on when error is on Line 1.
Not sure if chrome's new pretty print option for source files will fix that tho now?
I’m not sure the whole landscape but I’m pretty sure there are tools that allow deciphering prod bugs in this way, and I feel like there are also uses for this mapping in CSS -> SASS land.
But not really my expertise, perhaps someone else will jump in and give a better explanation.
I tried to reply to this comments parent but can only see some text that says “thread” where the reply should be so I’m replying here.
Chromes pretty print is still not enough. I’m unsure if the latest dev tools could point to the correct line or not, but it would still likely not matter.
If you pretty print a single line compiled file, there will still be multiple things wrong while debugging such as
what was the original file called (and the line it) before the file went through a module bundler or concatenation.
What was the name of of the variable or function? Uglify probably reduced down to only 1 or 2 letters.
What was the syntax of the original code? Transpires like Babel or typescript concert new syntax into old syntax. Play around on the Babel transformer a bit to see what type of code actually gets emitted. babeljs.io/repl/ some transforms like a sync/await look totally foreign when transpiled.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
When we write the code (often JavaScript in this case), we create a source. The source code looks the way we first input it.
But when we serve the code, often we don't want to send the "source" code to the end user, we send a compressed version. Things like "UglifyJS" turn the code we write, changing all the variables into single letter vars and remove all the whitespace in the file. What we end up is code that behaves the same way but is shipped to the end use in fewer bytes. This means faster webpages. Overall we try to send as little data as possible if we can help it.
JavaScript parser / mangler / compressor / beautifier toolkit
UglifyJS 3
UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.
Note:
uglify-jssupports JavaScript and most language features in ECMAScript.uglify-js.uglify-js@3has a simplified API and CLI that is not backwards compatible withuglify-js@2.Install
First make sure you have installed the latest version of node.js (You may need to restart your computer after this step).
From NPM for use as a command line app:
From NPM for programmatic use:
Command line usage
UglifyJS can take multiple input files. It's recommended that you pass the input files first, then pass the options. UglifyJS will parse input files in sequence and apply any compression options. The files are parsed in the same global scope, that is, a reference…
We also use transpilers such babelJS, which let us write more "modern" javascript features and compile them into code which works across all browsers, even the older ones.
🐠 Babel is a compiler for writing next generation JavaScript.
The compiler for writing next generation JavaScript
Supporting Babel
Babel (pronounced "babble") is a community-driven project used by many companies and projects, and is maintained by a group of volunteers. If you'd like to help support the future of the project, please consider:
Sponsors
Our top sponsors are shown below! [Become a sponsor]
Intro
Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.
In
Out
But what happens if we ever want to go back in the other direction, perhaps to debug? Now we have to map the compressed or compiled code back to the source. It's a series of instructions that can help turn things back into source code if we need it. If a sourcemap is created, there's probably an associated tool that knows how to interpret the sourcemap.
I think that's the gist, if anyone thinks I made a mistake, let me know!
Loud and clear. Thanks, Ben!
Hi ben! I'm slightly confused: what kind of situation is that where you need to debug and you only have an uglified version of your code, and not the original source?
You'll have an issue on a browser that doesn't support your code as-is (spread syntax, for example).
The code in the debugger is not your code - it's the foreign code. You can have your own code, but you have to step through this stripped-down code.
Unless your source is mapped, you won't know what code you're actually stepping through.
It's when something good wrong on production sure, but your code has been minified to one line, very hard to figure out what's going on when error is on Line 1.
Not sure if chrome's new pretty print option for source files will fix that tho now?
I’m not sure the whole landscape but I’m pretty sure there are tools that allow deciphering prod bugs in this way, and I feel like there are also uses for this mapping in CSS -> SASS land.
But not really my expertise, perhaps someone else will jump in and give a better explanation.
I tried to reply to this comments parent but can only see some text that says “thread” where the reply should be so I’m replying here.
Chromes pretty print is still not enough. I’m unsure if the latest dev tools could point to the correct line or not, but it would still likely not matter.
If you pretty print a single line compiled file, there will still be multiple things wrong while debugging such as