Process Web Components into one output file
npm install polymer-bundler

polymer-bundler is a library for packaging project assets for production to minimize network round-trips.
The Polymer CLI uses polymer-build, which uses polymer-bundler, so you can think of the CLI's build pre-configured polymer-build pipeline including polymer-bundler. Setting this up for you makes the CLI easy to use, but as a command-line wrapper its customization options are more limited. polymer-bundler allows you to completely customize your bundle strategy.
Web pages that use multiple HTML Imports, external scripts, and stylesheets to load dependencies may end up making lots of network round-trips. In many cases, this can lead to long initial load times and unnecessary bandwidth usage. The polymer-bundler tool follows HTML Imports, external script and stylesheet references, inlining these external assets into "bundles", to be used in production.
In the future, technologies such as HTTP/2 and Server Push will likely obsolete the need for a tool like polymer-bundler for web deployment uses.
polymer-bundler is available on npm. For maximium utility, polymer-bundler should be installed globally.
npm install -g polymer-bundler
This will install polymer-bundler to /usr/local/bin/polymer-bundler (you may need sudo
for this step).
-h|--help: Print this message-v|--version: Print version number-r|--root: The root of the package/project being bundled. Defaults to the current working folder.--exclude : Exclude a subpath from root. Use multiple times to exclude multiple paths. Tags (imports/scripts/etc) that reference an excluded path are left in-place, meaning the resources are not inlined. ex: --exclude=elements/x-foo.html --exclude=elements/x-bar.html--inline-scripts: External scripts will only be inlined if this flag is provided.--inline-css: External stylesheets will only be inlined if this flag is provided.--manifest-out : If specified, the bundle manifest will be written out to .--redirect | : Routes URLs with arbitrary , possibly including a protocol, hostname, and/or path prefix to a on local filesystem. For example --redirect "myapp://|src" would route myapp://main/home.html to ./src/main/home.html. Multiple redirects may be specified; the earliest ones have the highest priority.--rewrite-urls-in-templates: Fix URLs found inside tags and certain element attributes (action, assetpath, href, src, and style) when inside tags. This may be necessary to bundle some Polymer 1.x projects with components that ues relative image URLs in their styles, as Polymer 1.x did not use the assetpath of to resolve URLs in styles like Polymer 2.x does.--shell: Uses a bundling strategy which puts inlines shared dependencies into a specified html app "shell".--strip-comments: Strips all HTML comments from the document which do not contain an @license, or start with , and other important comments of the form . Defaults to false.strategy: A function that takes an array of bundles and returns an array of bundles. There are a strategy factory functions available in bundle-manifest.urlMapper: A function that takes bundles and returns a Map of URLs to bundles. This determines the location of generated bundles. There are URL mapper factory functions available in bundle-manifest.generateManifest() takes a collection of entrypoint URLs and promises a BundleManifest which describes all the bundles it will produce.
.bundle() takes a BundleManifest and returns a Promise for a BundleResult, which contains a map of the generated bundle html files and an updated manifest containing information on what imports were inlined for each Bundle.
A simple example:
``js`
const bundler = new require('polymer-bundler').Bundler();
bundler.generateManifest(['my-app.html']).then((manifest) => {
bundler.bundle(manifest).then((result) => {
console.log('');
console.log(result.documents.get('my-app.html').content);
});
});
An example with a customized sharding strategy and output layout:
`js
const {Analyzer, FsUrlLoader} = require('polymer-analyzer');
const analyzer = new Analyzer({
urlLoader: new FsUrlLoader(path.resolve('.'))
});
const {Bundler,
generateSharedDepsMergeStrategy,
generateCountingSharedBundleUrlMapper} = require('polymer-bundler');
const bundler = new Bundler({
analyzer: analyzer,
excludes: [],
inlineScripts: true,
inlineCss: true,
rewriteUrlsInTemplates: false,
stripComments: true,
// Merge shared dependencies into a single bundle when
// they have at least three dependents.
strategy: generateSharedDepsMergeStrategy(3),
// Shared bundles will be named:
// shared/bundle_1.html, shared/bundle_2.html, etc...
urlMapper: generateCountingSharedBundleUrlMapper('shared/bundle_')
});
// Provide the strategy and the URL mapper to produce a
// manifest using custom behavior.
bundler.generateManifest(['item.html', 'cart.html']).then((manifest) => {
bundler.bundle(manifest).then((result) => {
// do stuff here with your BundleResult
});
});
`
In order to inlining the contents of HTML Import documents into the bundle, polymer-bundler has to make a few compromises to preserve valid HTML structure, script execution and style rule order:
1. Contents of all HTML Import documents will be moved to
1. Any scripts or styles, inline or linked, which occur after a
node in will be moved to ` after the contents of the HTML Import.