ThereâÂÂs all this wonderful code on . Hundreds of thousands of modules. What if we could use that code in the browser?
Hey, we can with browserify!
With , we can use the thousands of modules onnpm in our browser-side code.
We can also write our browser-side JavaScript in the node.js style by using therequire function.
Browserify is one of many options for bundling JS for the browser. See the alternatives section at the end of this post for more info.
Install browserify:
npm install -g browserify
The-g option installs browserify globally on your computer, allowing you to use it on the command line.
Brief example using a core node module
Create a file namedindex.js and add this code:
// require the core node events modulevarEventEmitter=require('events').EventEmitter//create a new event emittervaremitter=newEventEmitter// set up a listener for the eventemitter.on('pizza',function(message){console.log(message)})// emit an eventemitter.emit('pizza','pizza is extremely yummy')
In most cases core node modules are a little too big to regularly use in the browser. This example is just a demonstration of whatâÂÂs possible with therequire statement. You may want to research lightweight alternatives to core modules when writing code for production.
Now, to be able to run this code in the browser, enter this command in the terminal:
browserify index.js > bundle.js
The bundle.js file now has your event emitter code along with any dependencies on core node modules and shims to make them work in the browser.
You can include bundle.js in your html now like any other JavaScript file.
Example:
<!DOCTYPE html><html><head><title>browserify example</title></head><body><scriptsrc="/bundle.js"></script></body></html>
ThatâÂÂs it! Now you can use node modules andrequire in the browser!
Live reload development environment
If youâÂÂre in the middle of writing code, youâÂÂll find runningbrowserify in the terminal to regenerate bundle.js, then refreshing the browser to be time-consuming and annoying.
Enter budo!
is a command-line tool for automatically generating and serving your browserify bundles as you develop. ItâÂÂs designed to be useful for quick prototyping. Each time you save your JavaScript filebudo will regenerate the bundle.js file and refresh the browser automatically.
Install budo:
Now, run this:
budo index.js:bundle.js --live
The--live option enables the live reload functionality of beefy.
Theindex.js:bundle.js is telling budo to read the contents ofindex.js, bundle the code, and serve that bundle to the browser asbundle.js.
This will by default serve your index.html file at .
Open Chrome, enter that url, then open the JavaScript console by using the keyboard shortcutCommand+Option+j.
YouâÂÂll seepizza is extremely yummy in the JavaScript console!
Browserify transforms
When browserify bundles our code, we have the option to transform the code as well.
This is useful for a lot of purposes: using , , , and more.
Browserify transform example using brfs
We can use transforms on the command-line using the-t argument:
browserify index.js -o bundle.js -t brfs
Using transforms with budo is similar. Take a look at this example:
budo index.js:bundle.js -- -t brfs
Any arguments after the-- are passed to browserify. Arguments before the âÂÂâÂÂâ are for budo.
With brfs weâÂÂre able to run code like this in our index.js file:
varfs=require('fs')varpath=require('path')varcontent=fs.readFileSync(path.join(__dirname,'hello.md'))console.log(content)
Put some text into a file namedhello.md, runbudo index.js:bundle.js -- -t brfs, and youâÂÂll see the text from that file in the JavaScript console of Chrome.
When the above chunk of code is sent to the browser it ends up looking something like this:
varcontent='whatever text was in that file'console.log(content)
This can be useful for reading data files, templates, and whatever else exists on your filesystem that you want to share with your browser code.
Transforms can do a lot more. Check out .
Using browserify programatically
Browserify isnâÂÂt just a command-line tool. You can use it in node modules and applications as well.
HereâÂÂs an example that does the same thing asbrowserify index.js -o bundle.js:
varfs=require('fs')varpath=require('path')varbrowserify=require('browserify')varinput=path.join(__dirname,'index.js')varoutput=path.join(__dirname,'bundle.js')varb=browserify(input)b.bundle(function(err,buf){if(err)returnconsole.log(err)fs.writeFile(output,buf,function(err){if(err)returnconsole.log(err)})})
HereâÂÂs an example of using a transform programatically:
varfs=require('fs')varpath=require('path')varbrowserify=require('browserify')varinput=path.join(__dirname,'index.js')varoutput=path.join(__dirname,'bundle.js')varb=browserify(input)b.transform('brfs')b.bundle(function(err,buf){if(err)returnconsole.log(err)fs.writeFile(output,buf,function(err){if(err)returnconsole.log(err)})})
More browserify resources
Alternatives to browserify
- â a module bundler that is heavy on configuration.
- â An interesting bundler focused on removing unused code and minimizing boilerplate code produced by the bundler.
A newsletter focused on exploring & advancing the craft of JavaScript, Node, & related technologies.