# Frontend Dependency Management with Browserify

DevFeed: [Frontend Dependency Management with Browserify](<https://devfeed.tech/articles/frontend-dependency-management-with-browserify-19691.md>)

Original publisher: [Read original article](<https://word.bitly.com/post/101360133837>)

Author: Wordbitly

Published: 2014-10-30T20:10:27Z

Content type: tutorial

Language: en

Sources: [Bitly](<https://devfeed.tech/sources/bitly.md>)

Topics: [frontend development](<https://devfeed.tech/topics/frontend-development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Package Management](<https://devfeed.tech/topics/package-management.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>), [npm](<https://devfeed.tech/topics/npm.md>)

Tags: [browserify](<https://devfeed.tech/tags/browserify.md>), [dependency-management](<https://devfeed.tech/tags/dependency-management.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [npm](<https://devfeed.tech/tags/npm.md>), [package-management](<https://devfeed.tech/tags/package-management.md>)

## AI overview

This developer article explains how Bitly adopted Browserify for frontend dependency management while overhauling its "Your Bitlinks" interface. It describes Browserify's Node.js-style module and package workflow, including bundling dependencies from an entry point into a destination file, and discusses benefits such as fewer HTTP requests and a less-polluted global namespace.

## Source excerpt

With frontend development moving as fast as it does at Bitly, things can get pretty messy. We found ourselves with piles of unmanaged script tags and little indication of what was still being used in the app's current iteration. There had to be a better way! Enter Browserify! A few months ago, we embarked upon a project to totally overhaul the "Your Bitlinks" interface, and with that came the opportunity to rethink our practices and introduce frontend dependency management. Now the page looks as good behind the scenes as it does in your browser! So, what is Browserify? Browserify is a great tool that lets you write your client-side scripts like it's node, allowing you to use node's package management and module systems. Each file should be a module and explicitly require() all its dependencies. Then you simply give Browserify your main entry point, such as an overarching app file, and the name of a destination file, e.g. browserify app.js > bundle.js This example takes your network of dependencies starting at app.js and streams all the files from your network of dependencies into bundle.js. (Side note: Being familiar with the node.js environment and NPM, node's package manager, is essential for picking up Browserify. In the weeks before we started working with Browserify, I wrote and published a node module as a side project. Going through the process, making sure all the pieces were in place-- specifically the package.json-- so that I could add it into the NPM registry made figuring out Browserify much easier.) Why use Browserify? There was no question in our minds that using a frontend dependency management tool was an important step in our app's development. We considered the field of options, ultimately settling on Browserify. We didn't need the async loading functionality of Require.js and appreciated the power of using NPM, leaving Browserify as the natural choice. Leveraging node to bundle our JavaScript provides many advantages over the traditional multiplicit