Browserify is useful

Bogdan BUCUR -

During the React tutorial presented in the previous post, I got a good taste of Browserify and so far it's the first tool of its kind that I found personally useful.

Browserify helps with the module management, using npm, and can also to other useful transformations to the source file. You can find a very clear Browserify tutorial on Sitepoint but I'm also going to say some words.

For example, let's say you want to do create a new script that requires jQuery as a dependency, but you don't really want to bundle it. After installing Browserify (npm install -g browserify) the first logical step is to create a package.json file.

{
  "name": "MyProject",
  "version": "0.0.1",
  "author": "Bogdan BUCUR",
  "description": "Test browserify project",
  "dependencies": {
    "jquery": "latest",
  },
  "devDependencies": {
    "browserify": "latest"
  }
}

"Dependencies" covers the scripts you need for your project and "devDependencies" covers the scripts required for the developer to make updates.

The version number is "latest" in our case, automatically grabbing the latest version of the required script (using "*" has the same effect as using "latest"). You can also use numbers like "1.11", "1.11.1" or even "1.11.x" for version 1.11.0 up to but not including 1.12.

Running npm install from the app directory will automatically install jQuery inside the node_modules directory.

Usually, I would have created an index.html file, including jquery and my javascript file

<html>
<head>
	<title>Browserify test</title>
</head>
<body>
	<script src="node_modules/jquery/dist/jquery.min.js"></script>
	<script src="dev/main.js"></script>
</body>
</html>

and here's the content of dev/main.js:

(function () {
	$('<h1>Hello Browserify</h1>').appendTo('body');
})();

Voila:

For a production file I would then bundle up both js files (main.js and jquery.min.js) in the same file and compress it.

However, with browserify you can add this part to your package.json:

  "scripts": {
    "build-js": "browserify dev/main.js > build/main.js"
  }

and running npm run build-js will automatically create a "build/main.js" that already combines your script and jquery.

The index.html file and main.js are also much lighter now:

<html>
<head>
	<title>Browserify test</title>
</head>
<body>
	<script src="build/main.js"></script>
</body>
</html>

and

(function () {
	var $ = require('jquery');
	$('<h1>Hello Browserify</h1>').appendTo('body');
})();

However, having to run a script every time you make a change in your javascript files is not exactly very helpful. There's a neat module called "watchify" that fixes this problem.

Let's update package.json:

{
  "name": "MyProject",
  "version": "0.0.1",
  "author": "Bogdan BUCUR",
  "description": "Test browserify project",
  "dependencies": {
    "jquery": "latest",
    "angular": "latest"
  },
  "devDependencies": {
    "browserify": "latest",
    "watchify": "latest"
  },
  "scripts": {
    "build-js": "browserify dev/main.js > build/main.js",
    "watch-js": "watchify dev/main.js -o build/main.js"
  }
}

After installing watchify by running npm install again, we add a new script, watch-js that will automatically create a build/main.js file each time we update the dev version.

npm run watch-js and we're good to go.

For minification you can add uglifyify to the mix:

  "devDependencies": {
    "browserify": "latest",
    "watchify": "latest",
    "uglifyify": "latest"
  },
  "scripts": {
    "build-js": "browserify dev/main.js > build/main.js",
    "watch-js": "watchify dev/main.js -o build/main.js"
  },
  "browserify": {
    "transform": ["uglifyify"]
  }

and the built file will be automatically compressed.

The nicest part is that you can share this with other developers. All you need to send them is package.json, index.html and dev/main.js and by running npm install and then npm run build-js they will automatically build the production file, including jquery, with no effort on their part.

It's not a lot to do or learn and the benefits are great. Browserify can help you with the less interesting parts of developing by using just a couple of lines of code.