Rollup bundling
Overview
The versions of Rollup and Uglify are controlled by the Bazel toolchain. You do not need to install them into your project.
write_rollup_config
write_rollup_config(ctx, plugins, root_dir, filename, output_format, additional_entry_points)
Generate a rollup config file.
This is also used by the ng_rollup_bundle and ng_package rules in @angular/bazel.
Returns: The rollup config file. See https://rollupjs.org/guide/en#configuration-files
Attributes
ctx |
Bazel rule execution context |
plugins |
extra plugins (defaults to []) See the ng_rollup_bundle in @angular/bazel for example of usage. |
root_dir |
root directory for module resolution (defaults to None) |
filename |
output filename pattern (defaults to |
output_format |
passed to rollup output.format option, e.g. "umd" |
additional_entry_points |
additional entry points for code splitting |
run_rollup
run_rollup(ctx, sources, config, output)
Creates an Action that can run rollup on set of sources.
This is also used by ng_package and ng_rollup_bundle rules in @angular/bazel.
Returns: the sourcemap output file
Attributes
ctx |
Bazel rule execution context |
sources |
JS sources to rollup |
config |
rollup config file |
output |
output file |
run_uglify
run_uglify(ctx, input, output, debug, comments, config_name, in_source_map)
Runs uglify on an input file.
This is also used by https://github.com/angular/angular.
Returns: The sourcemap file
Attributes
ctx |
Bazel rule execution context |
input |
input file |
output |
output file |
debug |
if True then output is beautified (defaults to False) |
comments |
if True then copyright comments are preserved in output file (defaults to True) |
config_name |
allows callers to control the name of the generated uglify configuration,
which will be |
in_source_map |
sourcemap file for the input file, passed to the "--source-map content=" option of rollup. |
run_sourcemapexplorer
run_sourcemapexplorer(ctx, js, map, output)
Runs source-map-explorer to produce an HTML visualization of the sourcemap.
Attributes
ctx |
bazel rule execution context |
js |
Javascript bundle |
map |
sourcemap from the bundle back to original sources |
output |
file where the HTML report is written |
rollup_bundle
rollup_bundle(name, deps, srcs, additional_entry_points, entry_point, global_name, globals, license_banner, node_modules)
Produces several bundled JavaScript files using Rollup and Uglify.
Load it with
load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle")
It performs this work in several separate processes:
- Call rollup on the original sources
- Downlevel the resulting code to es5 syntax for older browsers
- Minify the bundle with Uglify, possibly with pretty output for human debugging.
The default output of a rollup_bundle
rule is the non-debug-minified es5 bundle.
However you can request one of the other outputs with a dot-suffix on the target's name.
For example, if your rollup_bundle
is named my_rollup_bundle
, you can use one of these labels:
To request the ES2015 syntax (e.g. class
keyword) without downleveling or minification, use the :my_rollup_bundle.es6.js
label.
To request the ES5 downleveled bundle without minification, use the :my_rollup_bundle.js
label
To request the debug-minified es5 bundle, use the :my_rollup_bundle.min_debug.js
label.
To request a UMD-bundle, use the :my_rollup_bundle.umd.js
label.
You can also request an analysis from source-map-explorer by buildng the :my_rollup_bundle.explore.html
label.
However this is currently broken for rollup_bundle
ES5 mode because we use tsc for downleveling and
it doesn't compose the resulting sourcemaps with an input sourcemap.
See https://github.com/bazelbuild/rules_nodejs/issues/175
For debugging, note that the rollup.config.js
and uglify.config.json
files can be found in the bazel-bin folder next to the resulting bundle.
An example usage can be found in https://github.com/bazelbuild/rules_nodejs/tree/master/internal/e2e/rollup
Attributes
name |
A unique name for this rule. |
deps |
Other rules that produce JavaScript outputs, such as |
srcs |
JavaScript source files from the workspace. These can use ES2015 syntax and ES Modules (import/export) |
additional_entry_points |
Additional entry points of the application for code splitting, passed as the input to rollup. These should be a path relative to the workspace root.
|
entry_point |
The starting point of the application, passed as the |
global_name |
A name given to this package when referenced as a global variable.
This name appears in the bundle module incantation at the beginning of the file,
and governs the global symbol added to the global context (e.g.
|
globals |
A dict of symbols that reference external scripts.
The keys are variable names that appear in the program,
and the values are the symbol to reference at runtime in a global context (UMD bundles).
For example, a program referencing @angular/core should use ng.core
as the global reference, so Angular users should include the mapping
|
license_banner |
A .txt file passed to the |
node_modules |
Dependencies from npm that provide some modules that must be resolved by rollup.
|