Some features on a web page require more than just the script file to work and will need to load styles and other resources, this is where Require Bundle can come in handy by providing a way to detect when a bundle of resources is necessary and loading it automatically.
Require Bundle will load various resources related to a feature or elements in your application only on the pages which they are present present or required.
Use cases:
- When the page has collapsible blocks, load collapsible.js and collapsible.css
- When the page has a product details image, load product-image-zoom.js and product-image-zoom.css
You might also require bundles from inside other scripts:
- From collapsible.js, require animate-helper.js before initializing a collapsible block to help with animating the open/close states
- Require cookie-helper.js before initializing a grid/list view feature that needs to save it's state
Setting up is pretty straight-forward. Download the script from dist folder and include it in your HTML preferably inside the document <head> element.
<script type="text/javascript" src="path/to/dist/require-bundle.min.js"></script>Require Bundle is also available on NPM:
$ npm install require-bundle-jsTo register a bundle you call RequireBundle.register, give it a name and pass in an array of the resource urls it needs to load, or other bundles as dependencies.
RequireBundle.register( 'animate-helper', [ '//url/to/animate-helper.min.js' ] ); // one script
RequireBundle.register( 'hammerjs', [ '//url/to/hammer.min.js', '//url/to/hammerjs-init.min.js' ] ); // two scripts
RequireBundle.register( 'fluid-slider', [ '//domain/js/fluid-slider.min.js', '//domain/css/fluid-slider.min.css' ] ); // one script, one style
RequireBundle.register( 'collapsible-block', [ '//domain/js/collapsible.min.js', 'animate-helper' ] ); // one script, one dependency
RequireBundle.register( 'bundle-only-dependencies', [ 'animate-helper', 'hammerjs' ] ); // bundles as dependenciesThe order or the resources does not matter since they will be loaded asyncronosly and only after all resources from a bundle is loaded the callback function will be executed.
To load a bundle you call RequireBundle.require and pass in the bundle name and callback function to execute after all resources have been loaded.
RequireBundle.require( 'fluid-slider', function(){ FluidSlider.init() });
RequireBundle.require( 'collapsible-block', function(){ Collapsible.init() });Bundles can be auto-loaded in 2 ways:
a. Provide a script that will detect the presence of an html element that requires a bundle and load the bundle with RequireBundle.require:
window.addEventListener( 'load', function(){
if( document.querySelector( '.slider-wrapper' ) ) {
RequireBundle.require( 'fluid-slider', function(){
FluidSlider.init();
} );
}
} );b. Register a bundle passing in the selector to detect the html elements that require it and optionally the callback function to execute:
RequireBundle.register( 'fluid-slider', [ '//domain/js/fluid-slider.min.js', '//domain/css/fluid-slider.min.css' ], '.slider-wrapper', function(){ FluidSlider.init(); } ); // Auto-load when `.slider-wrapper` is present, then execute callbackYou can remove a bundle from the registered bundles by calling the method RequireBundle.deregister:
window.addEventListener( 'load', function(){
RequireBundle.deregister( 'fluid-slider' );
} );This isn't a large project by any means, but you are definitely welcome to contribute.
Clone the repo and run npm install:
$ cd path/to/require-bundle-js
$ npm install
Run the build command:
$ gulp build
Build on file save:
$ gulp
$ gulp watch
Licensed under MIT.