Convert Node/CommonJS modules for the browser with on demand loading of JS files
Transform CommonJS modules to combined AMD (requirejs) files. Pack multiple related modules together, and make your initial pageload smaller.
npm install wrapup-partition
wrapup-partition partition --map mapping.json --output build
In the mapping/configuration file you can define which modules end up in which output file. Here you can group files together.
Modules required by a file specified in this configuration are added to that file if this module isn't required by some other module.
For example consider this graph:
homepage tweetDialog\ / \\ / parseTweetTextanimation
parseTweetText are not specified in the
parseTweetText is added to
dialog.js, because it only has
parents that are also in the
animation however is added to the
main.js because its parents are in multiple files.
You can use the node/commonjs
require() function as many times you like,
except when you want to split the parts. In that case you should use the
requirejs so you can use the original module names.
This automatically loads the
dialog.js file once.
In all other cases, you can simply use the
require function, for example to
load the tweetParser
var parse = require'./parseTweetText';/* ... */ ;
Sometimes module names can get very long, especially when your original file
structure contains multiple levels. That's why
wrapup-partition can rename
module IDs. This works very good, except when you want to dynamically load
other modules. Thats is where you need to know the renamed ID.
This can be solved by using the standard
modules. The first one contains a
requirejs like function that automatically
maps the module names, and the second contains a look-up object.
// require the wrapup-require module firstrequirejs'wrapup-require' fuctionreq// then use it to require the tweetDialogreq'tweetDialog'dialogopen;
In reality the tweetDialog module looks something like
define'c' 'require' 'exports' 'module' 'd'var parse = r'd';/* ... */ ;;
define'tweetDialog' 'require' 'exports' 'module' 'parseTweetText'var parse = r'parseTweetText';/* ... */ ;;
When you require the
wrapup-names you will get an object like: