requisite
Cosmic JavaScript bundling
Handroll.
Want ES module support? SeeIntroduction
Requisite bundles client-side code and templates. It features asynchronous module loading for optimal performance of large applications, automatic compiler detection for several languages and comes with a connect/express middleware for rapid development.
Features
- Use CommonJS modules in the browser.
- Customizable compiler/preprocessors.
- Simple API for programmatic usage.
- Lazy asset loading.
- Resolves relative as well as npm modules.
- Command line tool for bundling simple projects.
- Good Source map support.
Install
npm install -g requisite
Modules
Requiste allows you to structure your code using CommonJS (Node.js)
modules. From a given starting point or entry module, requisite will
trace your application's dependencies and bundle all require
'ed modules
together. Requiste's require
supports asynchronous loading of assets/modules
when an optional callback argument is provided.
// foo.jsmoduleexports = 'foo'; // async-bar.jsmoduleexports = 'bar' // entry.jsconsole // 'foo'
This compiles down to:
// ...prelude, defining require, etc. require require
Note how async-bar.js
is missing from the bundle, as it's loaded at runtime.
If you are writing a module that can be used both client/server side you can
define the browser
field in your package.json and finetune which bits will be
bundled for the client.
Usage
CLI
› requisite Usage: requisite [options] [files] Options: -h, --help display this help -v, --version display version -a, --async prelude should support async requires -b, --bare compile without a top-level -d, --dedupe deduplicate modules -e, --export <name> export module as <name> -i, --include <module> additional module to include, in <require as>:<path to module> format -g, --global global require -m, --minify minify output --minifier minifier to use -o, --output <file> write bundle to file instead of stdout, {} may be used as a placeholder -p, --prelude <file> file to use as prelude --no-prelude exclude prelude from bundle --no-source-map disable source maps --prelude-only only output prelude -s, --strict add "use strict" to each bundled module --strip-debug strip `alert`, `console`, `debugger` statements -w, --watch write bundle to file and and recompile on file changes -x, --exclude <regex> regex to exclude modules from being parsed --base path all requires should be relative to Examples: # bundle javascript file and all it's dependencies $ requisite module.js -o bundle.js # bundle several modules, appending .bundle.js to output $ requisite *.js -o {}.bundle.js
Examples
Bundle a javascript file and all it's dependencies:
$ requisite module.js -o bundle.js
Create several bundles, appending .bundle.js
to each entry module's name:
$ requisite *.js -o {}.bundle.js
Create a single shared bundle (to leverage caching in browser) and individual bundles for each page containing just the additional modules necessary for each:
$ requisite --dedupe main.js page1.js page2.js -o {}.bundle.js
You'd then use the bundle across the pages of your site like so:
// page1.js<script src="main.bundle.js"><script src="page1.bundle.js"> // page2.js<script src="main.bundle.js"><script src="page2.bundle.js"> // page3.js<script src="main.bundle.js"><script src="page3.bundle.js">
API
If you want more fine-grained control over requisite you can require it in your own projects and use it directly.
;
Middleware
For development it can be useful to serve bundles up dynamically, and a connect middleware is provided for exactly this purpose. Express example:
app
Which would make your bundle available as http://host/js/main.js
.