Uglifyjs: Option preamble not working on v3

[fibo]

On version 3, the --preamble flag seems not working.

[kzc]

$ bin/uglifyjs -V
uglify-js 3.0.10

$ echo "foo(); bar();" | bin/uglifyjs -cm -b beautify=false,preamble='"/* preamble */"'
/* preamble */
foo(),bar();

The 3.x API and CLI was rewritten and is not backwards compatible with 2.x.

https://github.com/mishoo/UglifyJS2#note

[alexlamsl]

CLI for the new location is documented here https://github.com/mishoo/UglifyJS2#command-line-options:

    -b, --beautify [options]    Beautify output/specify output options:
...
                                `preamble`  Preamble to prepend to the output. You
                                            can use this to insert a comment, for
                                            example for licensing information.
                                            This will not be parsed, but the source
                                            map will adjust for its presence.

[kzc]

@alexlamsl Having to always disable beautify in the CLI when using -b is a bit annoying:

uglifyjs -b beautify=false,preamble='"/* preamble */"'

What do you think about supporting a new CLI -B flag that sets beautify=false by default?

uglifyjs -B preamble='"/* preamble */"'

[alexlamsl]

Not against it the functionality, but I'm stuck thinking of what to write in the corresponding documentation:

program.option("-B [options]", "Same as --beautify except for `beautify`.", parse_js("beautify", true));

I don't think commander treats -B as some boolean shorthand of -b, but I'll need to double-check just in case.

[kzc]

Maybe -O as a short form for --output-options would be better than -B?

[kzc]

And yeah, documenting it wouldn't be easy.

[alexlamsl]

I think I'll leave this here for now - if they are encountered frequent enough in the wild, then we can reconsider/polish this up:

--- a/bin/uglifyjs
+++ b/bin/uglifyjs
@@ -29,6 +29,7 @@ program.option("-c, --compress [options]", "Enable compressor/specify compressor
 program.option("-m, --mangle [options]", "Mangle names/specify mangler options.", parse_js("mangle", true));
 program.option("--mangle-props [options]", "Mangle properties/specify mangler options.", parse_js("mangle-props", true));
 program.option("-b, --beautify [options]", "Beautify output/specify output options.", parse_js("beautify", true));
+program.option("-B, --output-options [options]", "Specify output options.", parse_js("output-options", true));
 program.option("-o, --output <file>", "Output file (default STDOUT).");
 program.option("--comments [filter]", "Preserve copyright comments in the output.");
 program.option("--config-file <file>", "Read minify() options from JSON file.");
@@ -62,12 +63,16 @@ if (!program.output && program.sourceMap && program.sourceMap.url != "inline") {
         options[name] = program[name];
     }
 });
+options.output = {};
 if (program.beautify) {
-    options.output = typeof program.beautify == "object" ? program.beautify : {};
-    if (!("beautify" in options.output)) {
-        options.output.beautify = true;
+    options.output.beautify = true;
+    if (typeof program.beautify == "object") for (var key in program.beautify) {
+        options.output[key] = program.beautify[key];
     }
 }
+if (typeof program.outputOptions == "object") for (var key in program.outputOptions) {
+    options.output[key] = program.outputOptions[key];
+}
 if (program.comments) {
     if (typeof options.output != "object") options.output = {};
     options.output.comments = typeof program.comments == "string" ? program.comments : "some";

[kzc]

I think that patch would be a useful feature for uglify 3.x users, although I think -O it would be slightly easier to explain as an --output-option than -B, as -O is more a kin to the minify() output option.

[alexlamsl]

I don't mind it either way, just keep in mind that -O may cause confusion with -o <file> :sweat_smile:

Let's think for a while longer for a cleaner / more elegant solution, but failing that I agree convenience should be valued over minimising surface area in this case.

[kzc]

just keep in mind that -O may cause confusion with -o

No doubt. But -o was already taken. It's your call.

[alexlamsl]

Just spitballing here - how about beautify=true _iif_ no options is provided to -b?

[kzc]

how about beautify=true iif no options is provided to -b?

Unfortunately 3.x has already been released with the implicit beautify=true behavior in -b.

I think it's best to have a new option for this to avoid breaking scripts in the wild.

[mbostock]

Any chance you can add an example of setting a preamble to the README? The need for double-quoting was surprising; I was expecting to be able to say:

uglifyjs -b preamble='// foo'

But you need to say:

uglifyjs -b beautify=false,preamble="'// foo'"

Likewise the error in the first example isn’t particularly obvious:

ERROR: `preamble=// foo` is not a supported option

[alexlamsl]

The double-quoting I believe is due to the shell you are using:

$ echo console.log("hi") | uglifyjs -b beautify=false,preamble='//header'
//header
console.log("hi");

uglify-js CLI does not require those extra quotes by itself.

Nonetheless, if you would like to clarify that in the docs, pull requests are always welcome.

[mbostock]

Right, in Bash, the single quotes are only passed to the program if they are surrounded in double quotes or escaped:

uglifyjs -b beautify=false,preamble=\'// foo\'

[alexlamsl]

While we are at this, in 3.x we have --config-file which allows you to specify the options in a JSON file, which might make things easier.

[fibo]

Previous syntax was better for my use case case it let me take advantage of npm script environment variables.

Anyway thank you for sharing this useful piece of software.

I just removed some info from preample adding only the website, to check how to use UglifyJS v3 syntax you can see the commit here: https://github.com/fibo/flow-view/commit/26fd134d81ba9cde30a0e4dafd4bca86f694ecbf

-"minify": "cd dist; uglifyjs ${npm_package_name}.js --source-map ${npm_package_name}.map --output ${npm_package_name}.min.js --compress --mangle --preamble \"// Software: ${npm_package_name}\n// Homepage: ${npm_package_homepage}\n// License: ${npm_package_license}\"; cd -",
+"minify": "cd dist; uglifyjs ${npm_package_name}.js --source-map --output ${npm_package_name}.min.js --compress --mangle -b beautify=false,preamble='\"// http://g14n.info/flow-view\"'; cd -",

[andrevenancio]

I love the --config-file option. very handy as I'm relying heavily on npm scripts for my project and this just makes everything a bit more clean to look at.

I've created my config-file dynamically so I could include some values defined on my original package.json things like author, version and year.

Here's a quick preview of my steps hopefully will be useful for someone..

const os = require('os');
const fs = require('fs');

fs.readFile('package.json', "utf8", (error, text) => {
    const pkg = JSON.parse(text);
    const json = {
        "toplevel": true,
        "compress": {
            "passes": 2,
        },
        "output": {
            "beautify": false,
            "preamble": `/*\n${pkg.name} - version: ${pkg.version}\nCopyright © ${(new Date).getFullYear()} ${pkg.author}\n*/`,
        },
    }
    fs.writeFile('scripts/minify-options.json', JSON.stringify(json), 'utf8', () => {
        console.log('file saved');
    });
});

1) generate your config-file. run node scripts/minify-options.js. This will generate a minify-options.json file that you can load on the next step.
2) compile your code uglifyjs original.js --config-file=\"scripts/minify-options.json\" > final.min.js