non-javascript assets
There are many browserify transforms you can use to do many things. Commonly, transforms are used to include non-javascript assets into bundle files.
brfs
One way of including any kind of asset that works in both node and the browser is brfs.
brfs uses static analysis to compile the results of fs.readFile() and fs.readFileSync() calls down to source contents at compile time.
For example, this main.js:
var fs = require('fs');var html = fs.readFileSync(__dirname + '/robot.html', 'utf8');console.log(html);
applied through brfs would become something like:
var fs = require('fs');var html = "<b>beep boop</b>";console.log(html);
when run through brfs.
This is handy because you can reuse the exact same code in node and the browser, which makes sharing modules and testing much simpler.
fs.readFile() and fs.readFileSync() accept the same arguments as in node, which makes including inline image assets as base64-encoded strings very easy:
var fs = require('fs');var imdata = fs.readFileSync(__dirname + '/image.png', 'base64');var img = document.createElement('img');img.setAttribute('src', 'data:image/png;base64,' + imdata);document.body.appendChild(img);
If you have some css you want to inline into your bundle, you can do that too with the assistence of a module such as insert-css:
var fs = require('fs');var insertStyle = require('insert-css');var css = fs.readFileSync(__dirname + '/style.css', 'utf8');insertStyle(css);
Inserting css this way works fine for small reusable modules that you distribute with npm because they are fully-contained, but if you want a more wholistic approach to asset management using browserify, check out atomify and parcelify.