require-bundle-js
Advanced tools
Resource dependency manager to asyncronously load JS, CSS or Images as a bundle.
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:
You might also require bundles from inside other scripts:
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-js
To 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 dependencies
The 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 callback
You 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.
FAQs
Resource dependency manager to asyncronously load JS, CSS or Images as a bundle.
We found that require-bundle-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.