How to get generalized output using a browser?

Question

Just started using browserify , but I can’t find the documentation on how to get it to produce miniature output.

So, I'm looking something like:

$> browserify main.js > bundle.js --minified 

Answer 1

Pull it through uglifyjs:

  browserify main.js | uglifyjs > bundle.js 

You can install it using npm, for example:

  npm install -g uglify-js 

Answer 2

Starting with version 3.38.x, you can use the minifyify plugin to minimize your package and still have useful source codes. This is not possible with other solutions - the best thing you can do is go back to the uncompressed package. Minifyify displays all backlinks to your source files (yes, even for coffeescript!)

Answer 3

Or use uglifyify transform, which "gives you the advantage of applying the Uglify" compress "transformation before processing it with Browserify, that is, you can remove dead code paths for conditional calls."

Answer 4

There is no need to use plugins to minimize while maintaining the original map:

 browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js 

Answer 5

After spending several hours researching how to build new build processes, I thought that others could benefit from what I did. I answer this old question as it looks high on Google.

My use case is a bit more active than the OP asked for. I have three build scenarios: development, testing, production. Since most professional developers will have the same requirements, I think it’s excusable to go beyond the original question.

In development, I use watchify to create an uncompressed package with the source map whenever a JavaScript file changes. I don’t need the uglify step, since I want the build to complete before I move the browser to the browser to update it, and in any case it will not do any good. For this, I use:

 watchify app/index.js --debug -o app/bundle.js -v 

For testing, I want to get the same code as for production (for example, uglified), but I also need a source map. I achieve this with:

 browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'" 

For production, the code is compressed using uglify and there is no source map.

 browserify app/index.js | uglifyjs -cm > app/bundle.js 

Notes:

I used these instructions for Windows and MacOS.

I stopped using minifyify because it is no longer supported.

There may be better ways than what I'm sharing. I read that it seems possible to get excellent compression by removing all the source files before combining with the browser. If you have more time to spend on it than mine, you can study this.

If you don’t have a proactive, uglify-js or browser already installed, install them using npm, thus:

 npm install -g browserify npm install -g watchify npm install -g uglify-js 

If you have older versions installed, I recommend that you upgrade. In particular, uglify-js, as they made changes to the command line arguments, which invalidates a lot of the information that appears on Google.