Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hughsk/uglifyify

A browserify transform which minifies your code using UglifyJS2
https://github.com/hughsk/uglifyify

Last synced: 13 days ago
JSON representation

A browserify transform which minifies your code using UglifyJS2

Awesome Lists containing this project

README 

        
# uglifyify



A [Browserify](http://browserify.org) v2 transform which minifies your code

using [terser](https://github.com/fabiosantoscode/terser) (a maintained fork of uglify-es).



## Installation



``` bash

npm install uglifyify

```



## Motivation/Usage



Ordinarily you'd be fine doing this:



``` bash

browserify index.js | uglifyjs -c > bundle.js

```



But uglifyify is able to yield smaller output by processing files individually

instead of just the entire bundle. When using uglifyify you should generally

**also** use Uglify, to achieve the smallest output. Uglifyify provides an

additional optimization when used with Uglify, but does not provide all of the

optimization that using Uglify on its own does, so it's not a replacement.



Uglifyify gives you the benefit of applying Uglify's "squeeze" transform on each

file *before* it's included in the bundle, meaning you can remove dead code

paths for conditional requires. Here's a contrived example:



``` javascript

if (true) {

  module.exports = require('./browser')

} else {

  module.exports = require('./node')

}

```



`module.exports = require('./node')` will be excluded by Uglify, meaning that

only `./browser` will be bundled and required.



If you combine uglifyify with [envify](http://github.com/hughsk/envify), you

can make this a little more accessible. Take this code:



``` javascript

if (process.env.NODE_ENV === 'development') {

  module.exports = require('./development')

} else {

  module.exports = require('./production')

}

```



And use this to compile:



``` bash

NODE_ENV=development browserify -t envify -t uglifyify index.js -o dev.js &&

NODE_ENV=production browserify -t envify -t uglifyify index.js -o prod.js

```



It should go without saying that you should be hesitant using environment

variables in a Browserify module - this is best suited to your own

applications or modules built with Browserify's `--standalone` tag.



## File Extensions



Sometimes, you don't want uglifyify to minify all of your files – for example,

if you're using a transform to `require` CSS or HTML, you might get an error

as uglify expects JavaScript and will throw if it can't parse what it's given.



This is done using the `-x` or `--exts` transform options, e.g. from the

command-line:



``` bash

browserify     \

  -t coffeeify \

  -t [ uglifyify -x .js -x .coffee ]

```



The above example will only minify `.js` and `.coffee` files, ignoring the rest.



## Global Transforms



You might also want to take advantage of uglifyify's pre-bundle minification

to produce slightly leaner files across your entire browserify bundle. By

default, transforms only alter your application code, but you can use global

transforms to minify module code too. From your terminal:



``` bash

browserify -g uglifyify ./index.js > bundle.js

```



Or programatically:



``` javascript

var browserify = require('browserify')

var fs = require('fs')



var bundler = browserify(__dirname + '/index.js')



bundler.transform('uglifyify', { global: true  })



bundler.bundle()

  .pipe(fs.createWriteStream(__dirname + '/bundle.js'))

```



Note that this is fine for uglifyify as it shouldn't modify the behavior of

your code unexpectedly, but transforms such as envify should almost always

stay local – otherwise you'll run into unexpected side-effects within modules

that weren't expecting to be modified as such.



## Ignoring Files



Sometimes uglifyjs will break specific files under specific settings – it's

rare, but does happen – and to work around that, you can use the `ignore`

option. Given one or more glob patterns, you can filter out specific files

this way:



``` bash

browserify -g [ uglifyify --ignore '**/node_modules/weakmap/*' ] ./index.js

```



``` javascript

var bundler = browserify('index.js')



bundler.transform('uglifyify', {

  global: true,

  ignore: [

      '**/node_modules/weakmap/*'

    , '**/node_modules/async/*'

  ]

})



bundler.bundle().pipe(process.stdout)

```



## Source Maps



Uglifyify supports source maps, so you can minify your code and still see the

original source – this works especially well with a tool such as

[exorcist](https://github.com/thlorenz/exorcist) when creating production

builds.



Source maps are enabled when:



* You're using another transform, such as

  [coffeeify](https://github.com/jnordberg/coffeeify), that inlines source maps.

* You've passed the `--debug` flag (or `debug` option) to your browserify

  bundle.



Enabling `--debug` with browserify is easy:



``` bash

browserify -t uglifyify --debug index.js

```

``` javascript

var bundler = browserify({ debug: true })



bundler

  .add('index.js')

  .transform('uglifyify')

  .bundle()

  .pipe(process.stdout)

```



If you'd prefer them not to be included regardless, you can opt out

using the `sourcemap` option:



``` bash

browserify -t [ uglifyify --no-sourcemap ] app.js

```

``` javascript

var bundler = browserify('index.js')



bundler.transform('uglifyify', { sourceMap: false })

  .bundle()

  .pipe(process.stdout)

```