hughsk / uglifyify Goto Github PK

Hello,

I'm trying to run uglifyify with babelify and get source maps, not sure what I'm doing wrong.

Here's what I'm running:

browserify \
     -t [ babelify --presets [ es2015 react ] ]  \
     -g uglifyify index.js > bundle.js

I'm pretty sure you need to pass -d to browserify to get source maps, but when I do that my output isn't minified.

browserify -d \
     -t [ babelify --presets [ es2015 react ] ]  \
     -g uglifyify index.js > bundle.js

Source maps and minification work with minifyify, but I'm seeing better compression if I run uglify.

This works:

browserify -d \
     -t [ babelify --presets [ es2015 react ] ] \
     -p [minifyify --map bundle.map.json --output bundle.map.json] index.js > bundle.js

Any help would be appreciated.

When building kinto.js (npm install --dev && npm run-dist), empty lines are inserted in kinto.min.js.
Command:

$ browserify --ignore process -s Kinto -g uglifyify -e src/index.js -o dist/kinto.min.js -t [ babelify --sourceMapRelative . ]

When I run the command twice, I get empty lines in different parts of the file, which produces a different checksum.

When I comment-out this.queue('\n') - line 86 of index.js, I still get valid files (only no empty lines) and they are the same when I repeat the command.

Are those newlines really necessary? If not, I'd rather not have them.
Thanks,

Started playing with this as a global transform. It works well, but I haven't found a way to catch errors as I would expect. For example:

var browserify = require('browserify');
var uglifyify = require('uglifyify');

var file = './test.js';

var errorHandler = function (error) {
  console.error("couldn't browserify: " + file);
  console.error(error.stack);
};

var b = browserify({basedir: 'js'});

// catch file system errors, such as test.js being unreadable
b.on('error', errorHandler);

b.add('./' + file);

// apply uglifyify transform
// TODO - handle errors?
b.transform({global: true}, 'uglifyify');

var bundle = b.bundle();

// catch errors in bundling
bundle.on('error', errorHandler);

bundle.pipe(/* some stream */);

If test.js has invalid JS, the transform will still run but causes a fatal error. If the transform is removed, the error handler on bundle catches the invalid JS.

Any ideas?

when executing browserify index.js | uglifyjs -c > bundle.js on windows 10 node 5.3 npm 3.7.1

I apologize in advance for the potentially silly question. I'm trying to uglify this as part of a bundle, however this ONE file does not seem to want to play nice.

To simplify recreating this issue, I have copied the exact code I'm using for bootstrap-select. It won't even uglifyify by itself!

https://gist.github.com/alexander-daniel/d527e8be5f5a3ec5eb15

If you try to run the command browserify -t uglifyify bootstrap-select.js -o select.js on this file, it outputs SyntaxError: Unexpected token when trying to uglifyify this file

Using "browserify": "^11.2.0", "uglifyify": "^3.0.1"

Any help would be appreciated! Thanks for the awesome browserify plugin, it's been a dream to use except for this minor hiccup!

Cheers!

I'm running browserify -g uglifyify ./index.js > bundle.js as indicated by the README.md, but nothing is getting uglified, the resulting file is still just a plain old human-readable massive file

(nodejs 10.20, uglifyify 2.5.0, windows 7)

I have noticed with this transform I am not getting deterministic builds.

Minimal test case below. When you run npm test it will just repeat the exact same Browserify bundle step but it will give you different size bundles.

package.json

{
  "private": true,
  "dependencies": {
    "browserify": "^14.1.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "uglifyify": "^3.0.4"
  },
  "scripts": {
    "test": "for i in 0 1 2 3 4 5 6 7 8 9; do echo \"require('react-dom')\" | browserify - -g uglifyify | wc -c; done"
  }
}

Shell:

npm install && npm test

My output:

> @ test /Users/casr/Source/scratch/uglifyify-test
> for i in 0 1 2 3 4 5 6 7 8 9; do echo "require('react-dom')" | browserify - -g uglifyify | wc -c; done

  319901
  319901
  320050
  319926
  319366
  319777
  319777
  319777
  319777
  319926

I have also uploaded this as a gist at https://gist.github.com/casr/664cf9a2011b940436e1c59c2716f6d5 if you want want to clone it from there.

Not sure if this is an uglifyify problem or an uglify problem, but we're seeing cases where non-dead code is dropped. Consider the following:

var result
var useX = //some code here;
if(useX) {
  result = require('./someotherModuleX');
} 
else {
 result = require('./someotherModuleY');
}
module.exports = result;

When we run this through uglifyify, both someOtherModuleX and someOtherModuleY are removed.

However, this works:

var useX = //some code here;
if(useX) {
  module.exports = require('./someotherModuleX');
} 
else {
 module.exports = require('./someotherModuleY');
}

A sample app is here:

https://github.com/raybooysen/uglifyifyExample

This seems to always inject

//# sourceMappingURL=out.js.map

no matter what I do, but it does appear to pass sourcemap info to Browserify. Any way I can avoid adding that? I don't really care for dev code, but when I build for production, I'd like to avoid it. Happy to help with a patch if you point me in the right direction, but I don't really know uglify's APIs at all.

There is no example that shows how to use the file extensions option with node.

I am trying to exclude css files. Since the "ignore" options seems to be broken ( #73 ) I tried using this option instead.

Both options don't seem to work as expected with version 4

Errors caused by config

b.transform('uglifyify', {
  extensions: ['.js'],
  global: true
})

Error extensions is not a supported option

Errors caused by CSS files

b.transform('uglifyify', {
  x: ['.js'],
  global: true
})

Error Unexpected token: punc (.)

b.transform('uglifyify', {
  exts: ['.js'],
  global: true
})

Error Unexpected token: punc (.)

b.transform('uglifyify', {
  exts: ['js'],
  global: true
})

Error Unexpected token: punc (.)

Actual command I use:

browserify -g [ babelify --presets [ react es2015 ] ] -g [ envify --NODE_ENV production ] -g [ uglifyify -c ] ./src/gui.jsx -o ./build/js/gui.js --extension=.jsx

It succeeds with uglifyify version 3.0.4 and fails with version 4.0.0 as follows:

TypeError: Cannot read property 'replace' of undefined while parsing file: src/gui.jsx
    at Stream.ready (node_modules/uglifyify/index.js:78:24)
    at Stream.<anonymous> (node_modules/uglifyify/index.js:100:12)
    at _end (node_modules/through/index.js:65:9)
    at Stream.stream.end (node_modules/through/index.js:74:5)
    at DestroyableTransform.onend (node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:499:10)
    at Object.onceWrapper (events.js:314:30)
    at emitNone (events.js:110:20)
    at DestroyableTransform.emit (events.js:207:7)
    at endReadableNT (node_modules/readable-stream/lib/_stream_readable.js:920:12)
    at _combinedTickCallback (internal/process/next_tick.js:102:11)

"devDependencies": {
    "babel-cli": "6.24.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babelify": "7.3.0",
    "browserify": "14.4.0",
    "envify": "4.0.0",
    "uglifyify": "4.0.0",
    "watchify": "3.9.0"
  }

Furthermore, removing uglifyify from the toolchain also succeeds, so that the dependencies listed above succeed using this command:

browserify -g [ babelify --presets [ react es2015 ] ] -g [ envify --NODE_ENV production ] ./src/gui.jsx -o ./build/js/gui.js --extension=.jsx

Due to this longstanding minimatch bug, the ignore option will never filter out files containing a directory starting with a dot anywhere in their path, nor files starting with a dot.

E.g. /home/bob/.jenkins/jobs/HellowWorld/workspace/snafu.js

I'm using ignore to allow es6-weak-map to work, but I'd like to at least strip white space to get it as small as possible without breaking it.

Is there a way to pass uglify options based on a glob pattern?

It would be neat if uglifyify could update its dependencies, especially on uglify-js itself.

The current version of uglify is in the 2.x range, uglifyify still depends on a 1.x version.

As the change from 1.x to 2.x may break other projects using uglifyify, I'd recommend reflecting this in the version number.

If I try to build react, using build instructions from https://facebook.github.io/react/docs/optimizing-performance.html#browserify, build fails with following error:

`_flags` is not a supported option

After small debugging it turns out that options object that is passed to plugin factory function can be mutated in time, and even if _flags property is deleted at the beginning, later, when string buffer is assembled, _flags may re-appear

So, I have no problem using arrow functions, const, and other ES6 features with uglifyify. However, I cannot use let at all. It produces a JS_Parse_Error on compilation.

Here's an example.

App.js:

let thisIsATest = true

CL:

uglifyify src/app.js -o build/app.js

Error returned:

Error
at new JS_Parse_Error (eval at <anonymous> (/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1526:18)

I really like this tool, but also need to be able to write in ES6. Cheers.

while this works:
browserify application.js | uglifyjs -c > application.dist.js

this doesn't:
browserify --transform uglifyify application.js --outfile application.dist.js

out file is not uglified

[email protected]
[email protected]

Hello,

Thanks for writing up this lib, very helpful!

I was wondering if there was a way to specify complex options to "compress", along the lines of:

-g [uglifyify --compress {drop_console:true, unused:true} --mangle --screw-ie8]

or

-g [uglifyify --compress 'drop_console,unused' --mangle --screw-ie8]

Both those examples fail for me.

Thanks!

I'm using uglifyify even in development for the dead code elimination. I'm defining constants that are always true or always false on the client so I can do things like:

if (IS_SERVER) {
  // do logic that only happens on the server
}

I can't seem to make uglifyify generate source maps unless the input already has a source map. In my case, the input is just pure JavaScript. Could we add an option to include source map comments?

index.js:

require("babel-core/lib/generation")

browserify.js:

var gulp = require("gulp");

var browserify = require("browserify");
var source = require('vinyl-source-stream');
var gulp = require("gulp");


    var bundle = browserify({
        entries: ["./index.js"],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    })

   // If I comment out uglifyif then it works again.
    bundle = bundle.transform('uglifyify', { global: true });

    return bundle.bundle()
                 .pipe(source("main.bundle.js"))
                 .pipe(gulp.dest("./assets"));

Running node browserify.js breaks because node_modules/babel-core/node_modules/source-map/lib/base64-vlq.js disappears.

For example, when you require("events") in your input file, along with some other modules, everything except the events module is minified.
Coudl it be that browserify doesn't pass built-in modules to transforms?

The regular expression used to pull out the sourcemaps from previous files fails if the file has a trailing new line.

This causes the sourcemaps to be lost and developers to be sad.

Happy to submit a PR with a fix — let me know. I've currently worked around it by adding

bundler.transform global: true, -> (es.map (file, cb) -> cb null, file.toString().trim())

Is there anything I'm doing wrong?

The output from below is 343K

browserify -t [ babelify --presets [ es2015 react ] ]  src/index.js \
-g [ envify --NODE_ENV production ] \
-g uglifyify -p bundle-collapser/plugin \
| uglifyjs -cm > public/build/app.js

is smaller than the one below is439K
build.js

var browserify = require('browserify')
var envify = require('envify/custom')

browserify('src/index.js')
  .transform('babelify', {presets: ['es2015', 'react']})
  .transform(envify({NODE_ENV: 'production'}))
  .transform({
    global: true,
    mangle: true,
    sourcemap: false,
    compress: {
      sequences: true,
      dead_code: true,
      booleans: true
    }
  }, 'uglifyify')
  .plugin(require('bundle-collapser/plugin'))
  .bundle()
  .pipe(process.stdout)

then node build.js | uglifyjs -cm > public/build/app.js

Hi, I come up with following error using this module in command line:

➜  ~ npm install uglifyify -g
Downloading uglifyify to /Users/ewind/.nvm/versions/node/v8.3.0/lib/node_modules/uglifyify_tmp
Copying /Users/ewind/.nvm/versions/node/v8.3.0/lib/node_modules/uglifyify_tmp/[email protected]@uglifyify to /Users/ewind/.nvm/versions/node/v8.3.0/lib/node_modules/uglifyify
Installing uglifyify's dependencies to /Users/ewind/.nvm/versions/node/v8.3.0/lib/node_modules/uglifyify/node_modules
[1/5] extend@^1.2.1 installed at node_modules/[email protected]@extend
[2/5] through@~2.3.4 installed at node_modules/[email protected]@through
[3/5] convert-source-map@~1.1.0 installed at node_modules/[email protected]@convert-source-map
[4/5] minimatch@^3.0.2 installed at node_modules/[email protected]@minimatch
[5/5] uglify-es@^3.0.15 installed at node_modules/[email protected]@uglify-es
All packages installed (10 packages installed from npm registry, used 1s, speed 360.98kB/s, json 10(19.72kB), tarball 393.24kB)
➜  ~ uglifyjs
zsh: command not found: uglifyjs
➜  ~ uglify  
zsh: command not found: uglify
➜  ~ uglifyify
zsh: command not found: uglifyify

Environment: macOS 10.13 / Node V8.3.0. Is that something I'm missing?

There are so many tools out there to generate a changelog. (I usually use conventional changelog with standard-version).

I ran into several issues with the 4.x upgrade. Sadly there are no features or breaking changes listed.

How would you feel about adding this to the architecture? It would really help other developers.

I created small example of using this transform https://github.com/mrDinckleman/uglifyify-sourcemap
I used only 'uglifyify' transform with sourcemaps, and visualizing shows this:

var hash={foo:require("./foo"),bar:require("./bar")};hash.foo("app"),hash.bar("app");

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5qcyJdLCJuYW1lcyI6WyJoYXNoIiwiZm9

Bundle sourcemaps loosing information about source code, but shows inlined sorcemaps. Is it normal or I am doing something wrong?

The -g flag has no effect. I think it was removed in browserify, and currently aliases to just installing a transform on each file.

Might be worth removing mention of it from the readme.

Umm never mind! please delete this issue.

[email protected]

the docs have this:

bundler.transform('uglifyify', {
  global: true,
  ignore: [
      '**/node_modules/weakmap/*'
    , '**/node_modules/async/*'
  ]
})

but if you do this you get:

Fatal error: `ignore` is not a supported option while parsing file: xyz.js while parsing file: xyz.js

either i'm doing something else wrong, or this is a blocking regression.

I am currently suffering from this uglify-es issue, which was presumably fixed with this PR in [email protected]. The latest [email protected] still points to [email protected]. Do you see a chance to update to at least [email protected]?

There were some breaking changes in 4.x that don't seem to be covered.
How about adding tests for all the options using the command line AND/OR node.

This way it's easier to find potential breaking changes in future versions.

I use uglifyify with babelify. I do:

browserify src.js -o out.js -t [ babelify --presets=babel-preset-es2015 ] -t uglifyify -d

In the result source map, there is:

{
  "version": 3,
  "sources": [
    "../../../usr/lib/node_modules/browserify/node_modules/browser-pack/_prelude.js", 
    "/home/usr/prj/src.js", 
    "/home/usr/prj/utils.js"
  ],
  "names": [], 
  "mappings": "...", 
  "file": "generated.js", 
  "sourceRoot": "", 
  "sourcesContent": [ "...", "...", "..."]
}

As you can see, Browserify file path is relative but my project paths are absolute.

I don't want to disclose my file system paths. Could you fix this?

Basically using the latest version throws a ton of these warnings, I haven't been able to zero in on exactly why its having difficult with sourcemaps. I am using browserify, babelify and rollupify as well and uglifyify was the last in the sequence of transforms, in practice it does seem to locate the sourcemaps correctly (so far), but its really outputting thousands of warnings.

I see 5 interesting PR with no feedback from the author(s). Is this project maintained?

I installed browserify and uglifyify but the moment I mention uglifyify on command line I get an error.

C:\test\test-require>browserify -t uglifyify --debug compress.js
Error: Cannot find module 'uglifyify' from 'C:\test\test-require'
at C:\Users\test-user\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:46:17
at process (C:\Users\test-user\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\Users\test-user\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:188:17)
at load (C:\Users\test-user\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:69:43)
at onex (C:\Users\test-user\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:92:31)
at C:\Users\test-user\AppData\Roaming\npm\node_modules\browserify\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)

compress.js is a simple dummy js file that require's another simple dummy js file.

For some reason, my dependencies listed in package.json are not being minified:

"dependencies": {
    "backbone": "~1.1.2",
    "fastclick": "~1.0.3",
    "jquery": "~2.1.0"
  },

Everything else is being minified correctly. Greatly appreciate any help. Let me know what other info you need.

Minimatch should be upgraded to v3 to avoid a RegExp DoS issue. We're using uglifyify in Jumpsuit, and get a deprecated warning because of this: jsonmaur/jumpsuit#29

In the source map example I think you have a mistake, sourcemap is passed as false

var bundler = browserify({ debug: true })

bundler
  .add('index.js')
  .transform({ sourcemap: false }, 'uglifyify')
  .bundle()
  .pipe(process.stdout)

Shouldn't it look like this?

var bundler = browserify({ debug: true })

bundler
  .add('index.js')
  .transform('uglifyify')
  .bundle()
  .pipe(process.stdout)

I am having issues with files that import a css file.

errorify: SyntaxError: Unexpected token: punc (:) while parsing file: <MY_PROJECT>/demo/main.css

Original Code/project: https://github.com/pixelass/peek-a-boo/blob/master/scripts/run-build.js#L97-L99

If I uncomment the lines from the snippet above it does not cause an error.

If this is more likely to be related to css-modulesify I can open/link an issue there.

Using uglifify with global:
b.transform(uglifyify, { global: true });

I get many line spaces:

What is wrong?

Hey,

b.transform({minify: true}, 'uglifyify')

but I don't think it's minifying (there are still comments left in, for one thing).

I see a ton of examples with CLI, but what about calling from inside of node ( like a gulp task with watchify )

Is my syntax wrong?

I'm running the following command:
NODE_ENV=production browserify -t envify -t uglifyify src/main.js -o build/main.min.js

My main.js looks like this:
var React = require('react');

The output file however is not minified at all, all commands are still in there etc.

Any thoughts?

There has been development on a new fork of uglify-es, which is now called terser and has its own package!

"terser": "^3.7.3"

Please upgrade to our new version.

Using 3.0.2,

I am running:

./node_modules/.bin/browserify                                                  \
    --exclude crypto                                                            \
    --exclude util                                                              \
    --transform folderify                                                       \
    --entry ./node_modules/*****-*****-sdk/build/index.js                   \
    --entry ./node_modules/*****-*****-app/build/index.js                   \
    --outfile resources/*****-modules.js                                    \
    --ignore ./node_modules/*****-*****/build/lib/*****.js   \
    --ignore ./node_modules/*****-*****-sdk/build/lib/*****js      \
    --global-transform [ uglifyify --ignore '**/node_modules/*****-*****/**' --ignore '**/node_modules/*****-*****/**' ]

in a Jenkins pipeline environment.

The two paths I want ignored are not actually getting ignored. If I run the same command locally through terminal, it actually does ignore the two paths. Does anyone know what could be the issue? Could it possibly be a bash issue? Jenkins? Shell?

With the update to 4.0.2 (from 3.0.4) the ignore option stopped working.

errorify: `ignore` is not a supported option

It is still documented in the readme. I guess the switch to uglify-es caused this. I'm not sure how to ignore CSS files that are transpiled with css-modules

How can one send options to uglify js with this transform?

Such as:

{
    mangle: true,
    compress: {
        sequences: true,
        dead_code: true,
        conditionals: true,
        booleans: true,
        unused: true,
        if_return: true,
        join_vars: true,
        drop_console: true
}

Uglify is now deprecated in favor of Uglify2. From https://github.com/mishoo/UglifyJS

I started working on UglifyJS’s successor, version 2. It’s almost a full rewrite (except for the parser which is heavily modified, everything else starts from scratch). I’ve detailed my reasons in the README, see the project page.
https://github.com/mishoo/UglifyJS2
Version 1 will continue to be maintained for fixing show-stopper bugs, but no new features should be expected.

I want to minify, but preserve license comments.
I have got this inside my scripts in my package.json

"build-js-light-prod": "browserify -g [ uglifyify --comments ] private/js/main-template-light.js -o public/js/main-light.js",

Then I started this with
npm run build-js-light-prod

My comment looks like this and it is placed at the beginning of the file.

/**
 *  @license
 *  This file is licensed to you under the Apache License,
 *  Version 2.0 (the "License"); you may not use this file except in
 *  compliance with the License. You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

The Problem I have ist that, my js is only minified and my comment isn't there anymore.
What am I doing wrong?