Update README.md.
* Add dependency badges * Switch to shields.io for consistent badges * Use the shorter `js` for fenced code blocks * Use spaces instead of tabs for indentation [ci skip]
This commit is contained in:
parent
e637bdaf4e
commit
64194e3aeb
59
README.md
59
README.md
|
|
@ -1,6 +1,10 @@
|
||||||
UglifyJS 2
|
# UglifyJS 2
|
||||||
==========
|
|
||||||
[](https://travis-ci.org/mishoo/UglifyJS2)
|
[](https://www.npmjs.com/package/uglify-js)
|
||||||
|
[](https://travis-ci.org/mishoo/UglifyJS2)
|
||||||
|
[](https://david-dm.org/mishoo/UglifyJS2)
|
||||||
|
[](https://david-dm.org/mishoo/UglifyJS2#info=devDependencies)
|
||||||
|
|
||||||
|
|
||||||
UglifyJS is a JavaScript parser, minifier, compressor or beautifier toolkit.
|
UglifyJS is a JavaScript parser, minifier, compressor or beautifier toolkit.
|
||||||
|
|
||||||
|
|
@ -10,10 +14,9 @@ There's also an
|
||||||
[in-browser online demo](http://lisperator.net/uglifyjs/#demo) (for Firefox,
|
[in-browser online demo](http://lisperator.net/uglifyjs/#demo) (for Firefox,
|
||||||
Chrome and probably Safari).
|
Chrome and probably Safari).
|
||||||
|
|
||||||
Install
|
## Install
|
||||||
-------
|
|
||||||
|
|
||||||
First make sure you have installed the latest version of [node.js](http://nodejs.org/)
|
First make sure you have installed the latest version of [node.js](https://nodejs.org/)
|
||||||
(You may need to restart your computer after this step).
|
(You may need to restart your computer after this step).
|
||||||
|
|
||||||
From NPM for use as a command line app:
|
From NPM for use as a command line app:
|
||||||
|
|
@ -30,8 +33,7 @@ From Git:
|
||||||
cd UglifyJS2
|
cd UglifyJS2
|
||||||
npm link .
|
npm link .
|
||||||
|
|
||||||
Usage
|
## Usage
|
||||||
-----
|
|
||||||
|
|
||||||
uglifyjs [input files] [options]
|
uglifyjs [input files] [options]
|
||||||
|
|
||||||
|
|
@ -368,7 +370,7 @@ You can use the `--define` (`-d`) switch in order to declare global
|
||||||
variables that UglifyJS will assume to be constants (unless defined in
|
variables that UglifyJS will assume to be constants (unless defined in
|
||||||
scope). For example if you pass `--define DEBUG=false` then, coupled with
|
scope). For example if you pass `--define DEBUG=false` then, coupled with
|
||||||
dead code removal UglifyJS will discard the following from the output:
|
dead code removal UglifyJS will discard the following from the output:
|
||||||
```javascript
|
```js
|
||||||
if (DEBUG) {
|
if (DEBUG) {
|
||||||
console.log("debug stuff");
|
console.log("debug stuff");
|
||||||
}
|
}
|
||||||
|
|
@ -381,7 +383,7 @@ warning, you can pass `warnings=false` to turn off *all* warnings.
|
||||||
Another way of doing that is to declare your globals as constants in a
|
Another way of doing that is to declare your globals as constants in a
|
||||||
separate file and include it into the build. For example you can have a
|
separate file and include it into the build. For example you can have a
|
||||||
`build/defines.js` file with the following:
|
`build/defines.js` file with the following:
|
||||||
```javascript
|
```js
|
||||||
const DEBUG = false;
|
const DEBUG = false;
|
||||||
const PRODUCTION = true;
|
const PRODUCTION = true;
|
||||||
// etc.
|
// etc.
|
||||||
|
|
@ -452,7 +454,7 @@ keep only comments that match this regexp. For example `--comments
|
||||||
|
|
||||||
Note, however, that there might be situations where comments are lost. For
|
Note, however, that there might be situations where comments are lost. For
|
||||||
example:
|
example:
|
||||||
```javascript
|
```js
|
||||||
function f() {
|
function f() {
|
||||||
/** @preserve Foo Bar */
|
/** @preserve Foo Bar */
|
||||||
function g() {
|
function g() {
|
||||||
|
|
@ -504,7 +506,7 @@ JavaScript ASTs in SpiderMonkey format.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
```javascript
|
```js
|
||||||
function uglify(ast, options, mangle) {
|
function uglify(ast, options, mangle) {
|
||||||
// Conversion from SpiderMonkey AST to internal format
|
// Conversion from SpiderMonkey AST to internal format
|
||||||
var uAST = UglifyJS.AST_Node.from_mozilla_ast(ast);
|
var uAST = UglifyJS.AST_Node.from_mozilla_ast(ast);
|
||||||
|
|
@ -529,12 +531,11 @@ Check out
|
||||||
[original blog post](http://rreverser.com/using-mozilla-ast-with-uglifyjs/)
|
[original blog post](http://rreverser.com/using-mozilla-ast-with-uglifyjs/)
|
||||||
for details.
|
for details.
|
||||||
|
|
||||||
API Reference
|
## API Reference
|
||||||
-------------
|
|
||||||
|
|
||||||
Assuming installation via NPM, you can load UglifyJS in your application
|
Assuming installation via NPM, you can load UglifyJS in your application
|
||||||
like this:
|
like this:
|
||||||
```javascript
|
```js
|
||||||
var UglifyJS = require("uglify-js");
|
var UglifyJS = require("uglify-js");
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -547,7 +548,7 @@ parse, (2) compress, (3) mangle, (4) generate output code.
|
||||||
There's a single toplevel function which combines all the steps. If you
|
There's a single toplevel function which combines all the steps. If you
|
||||||
don't need additional customization, you might want to go with `minify`.
|
don't need additional customization, you might want to go with `minify`.
|
||||||
Example:
|
Example:
|
||||||
```javascript
|
```js
|
||||||
var result = UglifyJS.minify("/path/to/file.js");
|
var result = UglifyJS.minify("/path/to/file.js");
|
||||||
console.log(result.code); // minified output
|
console.log(result.code); // minified output
|
||||||
// if you need to pass code instead of file name
|
// if you need to pass code instead of file name
|
||||||
|
|
@ -555,13 +556,13 @@ var result = UglifyJS.minify("var b = function () {};", {fromString: true});
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also compress multiple files:
|
You can also compress multiple files:
|
||||||
```javascript
|
```js
|
||||||
var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ]);
|
var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ]);
|
||||||
console.log(result.code);
|
console.log(result.code);
|
||||||
```
|
```
|
||||||
|
|
||||||
To generate a source map:
|
To generate a source map:
|
||||||
```javascript
|
```js
|
||||||
var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
|
var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
|
||||||
outSourceMap: "out.js.map"
|
outSourceMap: "out.js.map"
|
||||||
});
|
});
|
||||||
|
|
@ -574,7 +575,7 @@ Note that the source map is not saved in a file, it's just returned in
|
||||||
`file` attribute in the source map (see [the spec][sm-spec]).
|
`file` attribute in the source map (see [the spec][sm-spec]).
|
||||||
|
|
||||||
You can also specify sourceRoot property to be included in source map:
|
You can also specify sourceRoot property to be included in source map:
|
||||||
```javascript
|
```js
|
||||||
var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
|
var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
|
||||||
outSourceMap: "out.js.map",
|
outSourceMap: "out.js.map",
|
||||||
sourceRoot: "http://example.com/src"
|
sourceRoot: "http://example.com/src"
|
||||||
|
|
@ -583,7 +584,7 @@ var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
|
||||||
|
|
||||||
If you're compressing compiled JavaScript and have a source map for it, you
|
If you're compressing compiled JavaScript and have a source map for it, you
|
||||||
can use the `inSourceMap` argument:
|
can use the `inSourceMap` argument:
|
||||||
```javascript
|
```js
|
||||||
var result = UglifyJS.minify("compiled.js", {
|
var result = UglifyJS.minify("compiled.js", {
|
||||||
inSourceMap: "compiled.js.map",
|
inSourceMap: "compiled.js.map",
|
||||||
outSourceMap: "minified.js.map"
|
outSourceMap: "minified.js.map"
|
||||||
|
|
@ -594,7 +595,7 @@ var result = UglifyJS.minify("compiled.js", {
|
||||||
If your input source map is not in a file, you can pass it in as an object
|
If your input source map is not in a file, you can pass it in as an object
|
||||||
using the `inSourceMap` argument:
|
using the `inSourceMap` argument:
|
||||||
|
|
||||||
```javascript
|
```js
|
||||||
var result = UglifyJS.minify("compiled.js", {
|
var result = UglifyJS.minify("compiled.js", {
|
||||||
inSourceMap: JSON.parse(my_source_map_string),
|
inSourceMap: JSON.parse(my_source_map_string),
|
||||||
outSourceMap: "minified.js.map"
|
outSourceMap: "minified.js.map"
|
||||||
|
|
@ -629,7 +630,7 @@ Following there's more detailed API info, in case the `minify` function is
|
||||||
too simple for your needs.
|
too simple for your needs.
|
||||||
|
|
||||||
#### The parser
|
#### The parser
|
||||||
```javascript
|
```js
|
||||||
var toplevel_ast = UglifyJS.parse(code, options);
|
var toplevel_ast = UglifyJS.parse(code, options);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -645,7 +646,7 @@ properties are available:
|
||||||
The last two options are useful when you'd like to minify multiple files and
|
The last two options are useful when you'd like to minify multiple files and
|
||||||
get a single file as the output and a proper source map. Our CLI tool does
|
get a single file as the output and a proper source map. Our CLI tool does
|
||||||
something like this:
|
something like this:
|
||||||
```javascript
|
```js
|
||||||
var toplevel = null;
|
var toplevel = null;
|
||||||
files.forEach(function(file){
|
files.forEach(function(file){
|
||||||
var code = fs.readFileSync(file, "utf8");
|
var code = fs.readFileSync(file, "utf8");
|
||||||
|
|
@ -668,14 +669,14 @@ referenced, if it is a global or not, if a function is using `eval` or the
|
||||||
`with` statement etc. I will discuss this some place else, for now what's
|
`with` statement etc. I will discuss this some place else, for now what's
|
||||||
important to know is that you need to call the following before doing
|
important to know is that you need to call the following before doing
|
||||||
anything with the tree:
|
anything with the tree:
|
||||||
```javascript
|
```js
|
||||||
toplevel.figure_out_scope()
|
toplevel.figure_out_scope()
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Compression
|
#### Compression
|
||||||
|
|
||||||
Like this:
|
Like this:
|
||||||
```javascript
|
```js
|
||||||
var compressor = UglifyJS.Compressor(options);
|
var compressor = UglifyJS.Compressor(options);
|
||||||
var compressed_ast = toplevel.transform(compressor);
|
var compressed_ast = toplevel.transform(compressor);
|
||||||
```
|
```
|
||||||
|
|
@ -694,7 +695,7 @@ the compressor might drop unused variables / unreachable code and this might
|
||||||
change the number of identifiers or their position). Optionally, you can
|
change the number of identifiers or their position). Optionally, you can
|
||||||
call a trick that helps after Gzip (counting character frequency in
|
call a trick that helps after Gzip (counting character frequency in
|
||||||
non-mangleable words). Example:
|
non-mangleable words). Example:
|
||||||
```javascript
|
```js
|
||||||
compressed_ast.figure_out_scope();
|
compressed_ast.figure_out_scope();
|
||||||
compressed_ast.compute_char_frequency();
|
compressed_ast.compute_char_frequency();
|
||||||
compressed_ast.mangle_names();
|
compressed_ast.mangle_names();
|
||||||
|
|
@ -704,14 +705,14 @@ compressed_ast.mangle_names();
|
||||||
|
|
||||||
AST nodes have a `print` method that takes an output stream. Essentially,
|
AST nodes have a `print` method that takes an output stream. Essentially,
|
||||||
to generate code you do this:
|
to generate code you do this:
|
||||||
```javascript
|
```js
|
||||||
var stream = UglifyJS.OutputStream(options);
|
var stream = UglifyJS.OutputStream(options);
|
||||||
compressed_ast.print(stream);
|
compressed_ast.print(stream);
|
||||||
var code = stream.toString(); // this is your minified code
|
var code = stream.toString(); // this is your minified code
|
||||||
```
|
```
|
||||||
|
|
||||||
or, for a shortcut you can do:
|
or, for a shortcut you can do:
|
||||||
```javascript
|
```js
|
||||||
var code = compressed_ast.print_to_string(options);
|
var code = compressed_ast.print_to_string(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -751,7 +752,7 @@ to be a `SourceMap` object (which is a thin wrapper on top of the
|
||||||
[source-map][source-map] library).
|
[source-map][source-map] library).
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
```javascript
|
```js
|
||||||
var source_map = UglifyJS.SourceMap(source_map_options);
|
var source_map = UglifyJS.SourceMap(source_map_options);
|
||||||
var stream = UglifyJS.OutputStream({
|
var stream = UglifyJS.OutputStream({
|
||||||
...
|
...
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user