How to use uglify-js to minify in node.js and how to debug minified source

How to use uglify-js to minify in node.js and how to debug minified source
1. Debugging minified files in Chrome

How to use uglify-js to minify in node.js and how to debug minified source

After bundling files in a node.js application, the next step would be to minify them.

Minify means to compress a file by removing superfluous line breaks, comments, and whitespace in the js.

First, install the uglify-js module that will minify the file.

npm install uglify-js -g

If you have ever seen a minified file, you know that you cannot follow the source even if you look at the contents.

However, if you specify a source map when minifying with uglify-js, you can use the browser’s source map to debug with the js source before minifying.

Use the following command to minify

uglifyjs .\dist\bundle.js -c --source-map --output .\dist\bundle.min.js

Specify the file you want to compress next to uglifyjs and then the -c option. It did not work the other way around.

options	meaning
-c	Compression.
-o(–output)	File name to output
–source-map	Output source map file

A file is created with the following configuration

dist directory
  bundle.js
  bundle.min.js
  bundle.min.js.map

Try to read a minify (minify) file from an html file.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>uglifyjs test</title>
</head>
<body>
<script type="text/javascript" src=".\dist\bundle.min.js"></script>
</body>
</html>

When viewed in a browser, you will see that it is displayed correctly as shown below.

Reference Site

Debugging minified files in Chrome

In Chrome, press F12 to open the Developer Tools.

Click on the dot next to the X button (Close) in the upper right corner.

You will see “Settings.” Select it.

Check the “Enable JavaScript source maps” checkbox. This will allow debugging.

高橋