Minified JavaScript with Source Maps

Demonstrate step-by-step how to generate source maps for a minified JavaScript bundle to maintain the ability to debug in production.

const UglifyJS = require('uglify-js');
const fs = require('fs');

// Original JavaScript code
const originalCode = `function hello(name) {\n    console.log('Hello, ' + name);\n}`;

// Options for the UglifyJS minifier
const options = {
    sourceMap: {
        filename: 'out.js', // Output filename
        url: 'out.js.map' // URL of the source map
    }
};

// Minify the original code
const result = UglifyJS.minify(originalCode, options);

if (result.error) {
    console.error('Minification failed:', result.error);
    process.exit(1);
}

// Write the minified output to a file
fs.writeFileSync('out.js', result.code);
// Write the source map to a file
fs.writeFileSync('out.js.map', result.map);

This code uses UglifyJS to minify a JavaScript function and generate a source map. The `sourceMap` option is set to provide filenames for the output and the source map. After minification, both the minified code and the source map are written to files.

// Link to source maps in the minified JS file
//# sourceMappingURL=out.js.map

At the end of the minified JavaScript file ('out.js'), this line is appended as a comment. It tells the JavaScript engine or debugger where to find the source map file ('out.js.map') for the minified code, which is necessary for debugging.