Wordpress theme development with Browserify

You might like me have struggled to understand what Browserify is even looking at their initial explanation for what it does. The reason being is that the assume you know what these [modules, require] things are :

"Browserify lets you require('modules') in the browser by bundling up all of your dependencies."

I think as a developer you might be at any point along your climb that will never end in a summit. Thus you are not rubbish because you don't understand something nor does that make you a designer.

I had taken a look at node a couple of years ago now it feels and took it to be really different and I didn't get what browserify was trying to do and where should I use it.

This post is about a user case scenario that may not be worth it to you ? Making a wordpress theme that has js of course and that browserify manages.
Normally in a wordpress theme you will add js with something like this :

wp_enqueue_script( 'material-jquery', get_template_directory_uri() . '/js/jq.js', array(), '1.0', false ); 

This pops a script tag in your theme and loads like normal. So there is nothing wrong with this for a theme. The issue comes if you have a lot of javascript to add on top of the framework js and maybe jquery...so you start to get quite a few tags and each one results in a network call. So reducing the amount of these is good. Browserify does that as a side effect. Browserify bundles up your js into a single file.

You might have some utility functions that you always use and here is a cut down example of something that would be 'module' of javascript...

utils.js

"use strict"

module.exports = {
      isLive:()=>{
        if(window.location.href.indexOf('localhost')>0) {
          //console.log("localhost")
          return false;
        }else{
          //console.log("live")
          return true;
        }
      },
      hideAll:()=>{
        var sItems = "#platform, #cause, #news";
        $(sItems).hide()
      },
      testF:()=>{
        return "it works! es 6 arrow function yay!"
      }
    } 

​Notice also that this uses es6 or es2015..thats another useful addition. So think of browserify as being able to bundle your javascrpt together but via plugins you can make the es6 into es5 javascript that will be supported in browsers. the above code can be used and accessed with require. Notice above the module.exports  this exposes what you decide to expose in your file or module. To access a module use this ...

var utils = require("./utils") 

So you have an entry file that you point browserify to make sure to include your files and modules then you save a lot of network requests and you are able to get the plugins for browserify working for you. I prefer to use browserify with gulp.

I hope this article gets you started with a few new code bases or toolsets as the official site was written for those at a particular level.​