Transform your javascript with Browserify
Tired of battling endless <script> tags in your html files? Fed up with messing with a dozen libraries cluttering up the place? Can't see the wood from the trees? Try browserify (+ rollupify + wzrd)! It's amazing! It's awesome! It tidies up your code for you, so you don't have to (perhaps not :P)!
Seriously though, I've just been playing around with browserify, and it's awesome. It's that missing thing I've been trying to find for a long time. But what does it actually do, you ask?
Well, perhaps it's best to use an example. Consider these (relatively) harmless javascript files:
// SillySay.js
"use strict";
function sillySay(sentence) {
// Split the sentence up into words
var words = splitWords(sentence);
// Loop over all the words in the above array and display them one by one
for(let i in words) {
alert(words[i]);
}
}
// WordSplitter.js
"use strict";
function splitWords(sentence) {
// Split the sentence on whitespace and return the resulting array
return sentence.split(/\s+/g);
}To use our (perfectly ridiculous) example code, we not only have to include SillySay.js, but WordSplitter.js (this could be a library you use for example) as well:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Silly Say Demo</title>
</head>
<body>
<p>Silly Say Demo</p>
<p>By <a href="https://starbeamrainbowlabs.com/">Starbeamrainbowlabs</a></p>
<!---------------->
<script src="WordSplitter.js"></script>
<script src="SillySay.js" charset="utf-8"></script>
<script>
window.addEventListener("load", function(event) {
sillySay("This is a test");
});
</script>
<style>
html, body { font-size: 100%; }
body
{
font-family: sans-serif;
}
</style>
</head>
</html>That's looking a bit messy, but imagine what it'd be like if you added another few libraries? Or a new feature in a separate file? See the problem? Browserify solves just this issue. It analyses the dependencies of the entry point to your app, and bundles up all your code into a single file, nice and neat. You can add extra transforms (like plugins), too, to do extra things like automatically insert your app's version, or include other data files automatically, or transpile other languages to javascript automagically (full list here).
Sounds cool yet? Let me give you a quick tutorial on how I set up Browserify, with Rollupify and Wzrd.
Firstly, we need to set things up. If you don't have Node.js installed, do that now. You'll also get npm - Node's (perfectly awesome!) package manager. Next, let's create a quick project and paste in the code above. I've recorded an asciicast (as you may have seen a few times before here) of me going through the process:
(Can't see the asciicast above? Try viewing it here
If you'd like to take a look at the final result, as written in the asciicast above, you can find it over here. Questions and comments are welcome below :-)