Split Browserify Bundles into Individual Files
Sometimes you work in browsers without //@ sourceURL
or source maps. But you like using Browserify, since it's
truly amazing. How will you ever debug things? With all your modules squished into one file, it's a disaster.
Enter the Browserify Deoptimizer, which will handily “de-optimize” your Browserify bundles by turning them into individual files, including files for each module you author.
Usage
You use the Browserify Deoptimizer by first creating a Browserify bundle, programmatically. Then, instead of creating a
big string with bundle.bundle()
, you just deoptimize it!
var browserify = ;var deoptimize = ; var bundle = ;bundle;bundle; var baseDirectory = process; // module IDs will be determined relative to thisvar deoptimized = ;
Your deoptimized
variable will then look something like this:
"browserify-prelude.js": 'var require = function (file, …' "node_modules/jquery-browserify/package.json": 'require.define("/node_modules/…' "node_modules/jquery-browserify/index.js": 'require.define("/node_modules/…' "browserify-aliases.js": 'require.alias("jquery-browseri…' "start.js": 'require.define("/start.js",fun…' "browserify-entry.js": 'require("/start.js");'
You can then use these module IDs to write out the wrapped files to the filesystem, and the appropriate <script>
tags
to your index.html
.
Special Files
Since Browserify does some magic, we can't just create a single file for each of your modules. We need some magic files too. These are:
browserify-prelude.js
: contains the definition ofrequire
andprocess
, as well as any prepends withbundle.prepend
. This will be the first file in the map.browserify-aliases.js
: Contains any calls to Browserify'srequire.alias
to set up module aliases. This is inserted into the map after the entries for the aliased files themselves (e.g. after jquery-browserify's files). If there are no aliases, this file will not exist.browserify-entry.js
: Contains calls torequire
for all entry files in the bundle. If there are no entry files, this file will not exist.
Name
This package owes its name to r.js, the RequireJS optimizer, which turns multiple AMD modules into a single bundled file. Since this package does the opposite, I thought it'd be clever to name it a deoptimizer.