blob: 62c1ea70060e2062033462e113693016b41197d0 [file] [log] [blame] [edit]
<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/WebPage" lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/rules_nodejs/Terser.html" rel="canonical">
<link href="" rel="shortcut icon" type="image/png">
<title>rules_nodejs - Terser</title>
<!-- Webfont -->
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700|Open+Sans:400,600,700,800" rel="stylesheet">
<!-- Bootstrap -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom stylesheet -->
<link href="/rules_nodejs/css/main.css" rel="stylesheet">
<!-- metadata -->
<meta content="rules_nodejs" name="og:title"/>
<meta content="JavaScript and NodeJS rules for Bazel" name="og:description"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="common-nav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"
type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/rules_nodejs/">
<img class="navbar-logo" src="/rules_nodejs/images/bazel-navbar.svg">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-right" action="/rules_nodejs/search.html" id="cse-search-box">
<div class="form-group">
<input type="hidden" name="cx" value="2735dc72dd157bd19">
<input type="search" name="q" id="q" class="form-control input-sm" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/bazelbuild/rules_nodejs">GitHub</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container vpad">
<div class="row">
<div class="col-md-2">
<a aria-controls="sidebar-nav"
aria-expanded="false" class="btn btn-default btn-lg btn-block sidebar-toggle" data-toggle="collapse"
href="#sidebar-nav">
<i class="glyphicon glyphicon-menu-hamburger"></i> Navigation
</a>
<nav class="sidebar collapse" id="sidebar-nav">
<h3>rules_nodejs</h3>
<ul class="sidebar-nav">
<li><a href="/rules_nodejs/">Introduction</a></li>
<li><a href="install.html">Installation</a></li>
<li><a href="repositories.html">Repositories</a></li>
<li><a href="dependencies.html">Dependencies</a></li>
<li><a href="debugging.html">Debugging</a></li>
<li><a href="stamping.html">Stamping</a></li>
<li><a href="changing-rules.html">Making changes to rules_nodejs</a></li>
<li><a href="examples.html">Examples</a></li>
</ul>
<h3>Rules</h3>
<ul class="sidebar-nav">
<li><a href="/rules_nodejs/Built-ins.html">Built-ins</a></li>
<li><a href="/rules_nodejs/Cypress.html">Cypress</a></li>
<li><a href="/rules_nodejs/Jasmine.html">Jasmine</a></li>
<li><a href="/rules_nodejs/Karma.html">Karma</a></li>
<li><a href="/rules_nodejs/Labs.html">Labs</a></li>
<li><a href="/rules_nodejs/Protractor.html">Protractor</a></li>
<li><a href="/rules_nodejs/Rollup.html">Rollup</a></li>
<li><a href="/rules_nodejs/Terser.html">Terser</a></li>
<li><a href="/rules_nodejs/TypeScript.html">TypeScript</a></li>
</ul>
<h3>Community</h3>
<ul class="sidebar-nav">
<li><a href="https://github.com/bazelbuild/rules_nodejs/blob/master/CONTRIBUTING.md">Contribute to
rules_nodejs</a></li>
<li><a href="https://slack.bazel.build">Join #javascript on Slack</a></li>
<li><a href="https://github.com/bazelbuild/rules_nodejs/issues">Issue Tracker</a></li>
<li><a href="https://github.com/bazelbuild/rules_nodejs">Github</a></li>
</ul>
</nav>
</div>
<div class="col-md-8">
<div class="content">
<!-- *********************
DO NOT EDIT THIS FILE
It is a generated build output from Stardoc.
Instead you must edit the .bzl file where the rules are declared,
or possibly a markdown file next to the .bzl file
********************* -->
<h1 id="terser-rules-for-bazel">Terser rules for Bazel</h1>
<p>The Terser rules run the Terser JS minifier with Bazel.</p>
<p>Wraps the Terser CLI documented at https://github.com/terser-js/terser#command-line-usage</p>
<h2 id="installation">Installation</h2>
<p>Add the <code class="language-plaintext highlighter-rouge">@bazel/terser</code> npm package to your <code class="language-plaintext highlighter-rouge">devDependencies</code> in <code class="language-plaintext highlighter-rouge">package.json</code>.</p>
<h2 id="installing-with-self-managed-dependencies">Installing with self-managed dependencies</h2>
<p>If you didn’t use the <code class="language-plaintext highlighter-rouge">yarn_install</code> or <code class="language-plaintext highlighter-rouge">npm_install</code> rule, you’ll have to declare a rule in your root <code class="language-plaintext highlighter-rouge">BUILD.bazel</code> file to execute terser:</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Create a terser rule to use in terser_minified#terser_bin
# attribute when using self-managed dependencies
</span><span class="n">nodejs_binary</span><span class="p">(</span>
<span class="n">name</span> <span class="o">=</span> <span class="s">"terser_bin"</span><span class="p">,</span>
<span class="n">entry_point</span> <span class="o">=</span> <span class="s">"//:node_modules/terser/bin/uglifyjs"</span><span class="p">,</span>
<span class="c1"># Point bazel to your node_modules to find the entry point
</span> <span class="n">node_modules</span> <span class="o">=</span> <span class="p">[</span><span class="s">"//:node_modules"</span><span class="p">],</span>
<span class="p">)</span>
</code></pre></div></div>
<h2 id="terser_minified">terser_minified</h2>
<p><strong>USAGE</strong></p>
<pre>
terser_minified(<a href="#terser_minified-name">name</a>, <a href="#terser_minified-args">args</a>, <a href="#terser_minified-config_file">config_file</a>, <a href="#terser_minified-debug">debug</a>, <a href="#terser_minified-sourcemap">sourcemap</a>, <a href="#terser_minified-src">src</a>, <a href="#terser_minified-terser_bin">terser_bin</a>)
</pre>
<p>Run the terser minifier.</p>
<p>Typical example:</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/terser:index.bzl"</span><span class="p">,</span> <span class="s">"terser_minified"</span><span class="p">)</span>
<span class="n">terser_minified</span><span class="p">(</span>
<span class="n">name</span> <span class="o">=</span> <span class="s">"out.min"</span><span class="p">,</span>
<span class="n">src</span> <span class="o">=</span> <span class="s">"input.js"</span><span class="p">,</span>
<span class="n">config_file</span> <span class="o">=</span> <span class="s">"terser_config.json"</span><span class="p">,</span>
<span class="p">)</span>
</code></pre></div></div>
<p>Note that the <code class="language-plaintext highlighter-rouge">name</code> attribute determines what the resulting files will be called.
So the example above will output <code class="language-plaintext highlighter-rouge">out.min.js</code> and <code class="language-plaintext highlighter-rouge">out.min.js.map</code> (since <code class="language-plaintext highlighter-rouge">sourcemap</code> defaults to <code class="language-plaintext highlighter-rouge">true</code>).
If the input is a directory, then the output will also be a directory, named after the <code class="language-plaintext highlighter-rouge">name</code> attribute.</p>
<p><strong>ATTRIBUTES</strong></p>
<h4 id="terser_minified-name">name</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#name">Name</a>, mandatory</em>): A unique name for this target.</p>
<h4 id="terser_minified-args">args</h4>
<p>(<em>List of strings</em>): Additional command line arguments to pass to terser.</p>
<p>Terser only parses minify() args from the config file so additional arguments such as <code class="language-plaintext highlighter-rouge">--comments</code> may
be passed to the rule using this attribute. See https://github.com/terser/terser#command-line-usage for the
full list of terser CLI options.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="terser_minified-config_file">config_file</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></em>): A JSON file containing Terser minify() options.</p>
<p>This is the file you would pass to the –config-file argument in terser’s CLI.
https://github.com/terser-js/terser#minify-options documents the content of the file.</p>
<p>Bazel will make a copy of your config file, treating it as a template.</p>
<p>Run bazel with <code class="language-plaintext highlighter-rouge">--subcommands</code> to see the path to the copied file.</p>
<p>If you use the magic strings <code class="language-plaintext highlighter-rouge">"bazel_debug"</code> or <code class="language-plaintext highlighter-rouge">"bazel_no_debug"</code>, these will be
replaced with <code class="language-plaintext highlighter-rouge">true</code> and <code class="language-plaintext highlighter-rouge">false</code> respecting the value of the <code class="language-plaintext highlighter-rouge">debug</code> attribute
or the <code class="language-plaintext highlighter-rouge">--compilation_mode=dbg</code> bazel flag.</p>
<p>For example</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
"compress": {
"arrows": "bazel_no_debug"
}
}
</code></pre></div></div>
<p>Will disable the <code class="language-plaintext highlighter-rouge">arrows</code> compression setting when debugging.</p>
<p>If <code class="language-plaintext highlighter-rouge">config_file</code> isn’t supplied, Bazel will use a default config file.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">@npm//@bazel/terser:terser_config.default.json</code></p>
<h4 id="terser_minified-debug">debug</h4>
<p>(<em>Boolean</em>): Configure terser to produce more readable output.</p>
<p>Instead of setting this attribute, consider using debugging compilation mode instead
bazel build –compilation_mode=dbg //my/terser:target
so that it only affects the current build.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="terser_minified-sourcemap">sourcemap</h4>
<p>(<em>Boolean</em>): Whether to produce a .js.map output</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">True</code></p>
<h4 id="terser_minified-src">src</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a>, mandatory</em>): File(s) to minify.</p>
<p>Can be a .js file, a rule producing .js files as its default output, or a rule producing a directory of .js files.</p>
<p>Note that you can pass multiple files to terser, which it will bundle together.
If you want to do this, you can pass a filegroup here.</p>
<h4 id="terser_minified-terser_bin">terser_bin</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></em>): An executable target that runs Terser</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">@npm//@bazel/bin:terser</code></p>
</div>
</div>
<div class="col-md-2 sticky-sidebar">
<div class="right-sidebar">
<ul class="gh-links">
<li>
<i class="fa fa-github"></i>
<a href="https://github.com/bazelbuild/rules_nodejs/issues/new?title=Documentation issue: Terser&labels=question/docs">Create
issue</a>
</li>
</ul>
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#installation">Installation</a></li>
<li class="toc-entry toc-h2"><a href="#installing-with-self-managed-dependencies">Installing with self-managed dependencies</a></li>
<li class="toc-entry toc-h2"><a href="#terser_minified">terser_minified</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p class="text-muted">&copy; 2020 The rules_nodejs authors</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Anchor JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.0/anchor.min.js" type="text/javascript"></script>
<script>
// Automatically add anchors and links to all header elements that don't already have them.
anchors.options = { placement: 'left' };
anchors.add();
</script>
<script>
var shiftWindow = function () {
if (location.hash.length !== 0) {
window.scrollBy(0, -50);
}
};
window.addEventListener("hashchange", shiftWindow);
var highlightCurrentSidebarNav = function () {
var href = location.pathname;
var item = $('#sidebar-nav [href$="' + href + '"]');
if (item) {
var li = item.parent();
li.addClass("active");
if (li.parent() && li.parent().is("ul")) {
do {
var ul = li.parent();
if (ul.hasClass("collapse")) {
ul.collapse("show");
}
li = ul.parent();
} while (li && li.is("li"));
}
}
};
$(document).ready(function () {
// Scroll to anchor of location hash, adjusted for fixed navbar.
window.setTimeout(function () {
shiftWindow();
}, 1);
// Flip the caret when submenu toggles are clicked.
$(".sidebar-submenu").on("show.bs.collapse", function () {
var toggle = $('[href$="#' + $(this).attr('id') + '"]');
if (toggle) {
toggle.addClass("dropup");
}
});
$(".sidebar-submenu").on("hide.bs.collapse", function () {
var toggle = $('[href$="#' + $(this).attr('id') + '"]');
if (toggle) {
toggle.removeClass("dropup");
}
});
// Highlight the current page on the sidebar nav.
highlightCurrentSidebarNav();
});
</script>
</body>
</html>