{"id":10793,"date":"2015-03-18T12:13:34","date_gmt":"2015-03-18T16:13:34","guid":{"rendered":"http:\/\/webdevstudios.com\/?p=10793"},"modified":"2024-04-15T12:04:44","modified_gmt":"2024-04-15T16:04:44","slug":"using-browserify-with-javascript","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/","title":{"rendered":"Using Browserify with JavaScript (and Keeping Yourself Sane!)"},"content":{"rendered":"

Working with code in the browser is a challenge. Not only do you need to manage the disparate behaviors of a variety of browsers and<\/em> navigate the sometimes treacherous waters of JavaScript’s functional programming logic, but\u00a0managing a wide array of dependencies and large projects can quickly get unwieldy.<\/p>\n

Browserify<\/a> is a solution for allowing Node.js style require()<\/code> calls for importing libraries and\u00a0your own code in a simple, easy-to-read fashion.<\/p>\n

Outside of the browser, it is pretty simple to include a\u00a0library or additional file in your code (in most languages).\u00a0In PHP, just calling require ‘filename.php’ does the trick. No such luck in JavaScript…at least not in the browser. In Node.js<\/a>, the require()<\/code> function allows for importing external libraries installed by npm<\/a> or local files. Browserify aims to bring this same ease of use to the browser.<\/p>\n

Browserify works by reading through the files passed into it and connecting them all together into a single compiled (with a bit of extra optional magic that I’ll show you, too!)\u00a0file that you can then load on your site.<\/p>\n

<\/p>\n

Using Libraries<\/h3>\n

Just like in Node.js, you can require files installed using npm using Browserify, so if I want to include something like Underscore.js I can do something as simple as.<\/p>\n

$ npm install underscore<\/pre>\n
which installs the\u00a0Underscore.js library into my project’s node_modules directory.<\/p>\n
Then in my script I can add:<\/p>\n
var _ = require('underscore');<\/pre>\n
Which loads the\u00a0Underscore.js library into the _<\/code> variable.<\/p>\n
Using Your Files<\/h3>\n
So far so good right? Well, you can also\u00a0require your own files! Let’s say I have a function yolo<\/code>, which adds ‘, YOLO right?’ to the end of any string passed to it. Normally you would include this function in your main JavaScript file:<\/p>\n
var yolo = function( a ) {\n\u00a0 \u00a0 return a + ', YOLO right?';\n}<\/pre>\n
Which works just fine, but when we start adding to that function with\u00a0a monstrosity of logic to properly understand the meaning of the string passed in so that the YOLO can be placed at the ideal location for the greatest\u00a0impact? It now takes up 90% of our file.<\/p>\n
Using Browserify, we can separate functions and objects out into individual files to keep our code organized. Requiring a local file is as simple as:<\/p>\n
var yolo = require('.\/yolo.js');<\/pre>\n
Then in yolo.js<\/code> we need to adjust our code to tell Browserify what specifically we want to be passed when the file is required.<\/p>\n
module.exports = function(a) {\n\u00a0 \u00a0 return a + ', YOLO right?';\n}<\/pre>\n
That module.exports<\/code> variable is a special object used by Browserify to know exactly what to return when the file is required. You can\u00a0set module.exports<\/code> to be whatever you want,\u00a0including a function as I showed above or an object or array.<\/p>\n
Compiling<\/h3>\n
So now that we have libraries and local files being required, how do we make it so a browser can properly run your code? There are a few different ways, including the actual Browserify<\/a> package on npm, but I’m going to go over connecting it into Grunt, as that is what we are already using for a lot of our automation here at WebDevStudios.<\/p>\n
The grunt-browserify<\/a>\u00a0package lets you connect Browserify into your existing watches and tasks to keep your automation all in one place.<\/p>\n
A configuration as simple as:<\/p>\n
browserify: {\n\u00a0 \u00a0 dist: {\n\u00a0 \u00a0 \u00a0 \u00a0 files: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 'bundle.js': 'components\/main.js'\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n },<\/pre>\n
…will compile the main.js<\/code> file and all its requirements into the bundle.js<\/code> file. Of course, this being Grunt, you can also run additional tasks on it such as Uglify, and setup Grunt’s watch task to automatically compile it whenever the JavaScript is edited.<\/p>\n
Transforms<\/h3>\n
Already Browserify is pretty neat, right? But that’s not all! Using Browserify transforms you can do much more, like compiling ES6 or CoffeeScript, loading the contents of template files into a variable, and generally a ton of cool stuff that frees you up\u00a0to make great, compartmentalized code!<\/p>\n
Here is a list of transforms<\/a>\u00a0that will give you an idea of how much power some of these have, and here is a quick example of adding a transform to the Browserify Grunt task (after you’ve installed the transform through npm, of course).<\/p>\n
browserify: {\n    dist: {\n        files: {\n            'bundle.js': 'components\/main.js'\n        },\n        options: {\n            transform: ['jstify<\/a>']\n        }\n    }\n}<\/pre>\n
Try it!<\/h3>\n
I only just started diving in, but the power and benefit of Browserify are already very apparent.\u00a0The vast majority of projects I’ve worked on can benefit from cleaner dependency management and breaking segments of code into individual files. It’s very easy to get started with, especially if you already have a Grunt workflow setup, and the integration with npm packages is super slick, so try it!<\/p>\n","protected":false},"excerpt":{"rendered":"
Working with code in the browser is a challenge. Not only do you need to manage the disparate behaviors of a variety of browsers and navigate the sometimes treacherous waters of JavaScript’s functional programming logic, but\u00a0managing a wide array of dependencies and large projects can quickly get unwieldy. Browserify is a solution for allowing Node.js Read More Using Browserify with JavaScript (and Keeping Yourself Sane!)<\/span><\/a><\/p>\n","protected":false},"author":46,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[141,319,185,150],"tags":[507,387,508],"coauthors":[13429],"class_list":["post-10793","post","type-post","status-publish","format-standard","hentry","category-employeepost","category-products","category-products-we-love","category-tutorial","tag-browserify","tag-javascript-2","tag-javascript-in-browser"],"acf":{"blog_hero_image":null},"yoast_head":"\nUsing Browserify with JavaScript - WebDevStudios.com<\/title>\n<meta name=\"description\" content=\"Camden is here to sing the praises of using Browserify with JavaScript--and keeping your JS (and self) sane!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Browserify with JavaScript (and Keeping Yourself Sane!)\" \/>\n<meta property=\"og:description\" content=\"Camden is here to sing the praises of using Browserify with JavaScript--and keeping your JS (and self) sane!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDevStudios\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/webdevstudios\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-18T16:13:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T16:04:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/wds-default.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Camden Segal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:site\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Camden Segal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/\"},\"author\":{\"name\":\"Camden Segal\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/82ed512295976e49907010f3490989c2\"},\"headline\":\"Using Browserify with JavaScript (and Keeping Yourself Sane!)\",\"datePublished\":\"2015-03-18T16:13:34+00:00\",\"dateModified\":\"2024-04-15T16:04:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/\"},\"wordCount\":737,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"keywords\":[\"browserify\",\"javascript\",\"javascript in browser\"],\"articleSection\":[\"Employee Post\",\"Products\",\"Products We Love\",\"Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/\",\"name\":\"Using Browserify with JavaScript - WebDevStudios.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"datePublished\":\"2015-03-18T16:13:34+00:00\",\"dateModified\":\"2024-04-15T16:04:44+00:00\",\"description\":\"Camden is here to sing the praises of using Browserify with JavaScript--and keeping your JS (and self) sane!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/03\\\/18\\\/using-browserify-with-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Browserify with JavaScript (and Keeping Yourself Sane!)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"name\":\"WebDevStudios\",\"description\":\"WordPress Design and Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdevstudios.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\",\"name\":\"WebDevStudios\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"width\":173,\"height\":60,\"caption\":\"WebDevStudios\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/webdevstudios\",\"https:\\\/\\\/x.com\\\/webdevstudios\",\"http:\\\/\\\/instagram.com\\\/webdevstudios\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/webdevstudios-llc-\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/82ed512295976e49907010f3490989c2\",\"name\":\"Camden Segal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b061c568ad94847a4b510bf61fea026ebfa04e4da98f5e3229f11fd2c53b48e7?s=96&d=mm&r=g4d2650ff7fd93cb54809dd154b7add1c\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b061c568ad94847a4b510bf61fea026ebfa04e4da98f5e3229f11fd2c53b48e7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b061c568ad94847a4b510bf61fea026ebfa04e4da98f5e3229f11fd2c53b48e7?s=96&d=mm&r=g\",\"caption\":\"Camden Segal\"},\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/camden\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using Browserify with JavaScript - WebDevStudios.com","description":"Camden is here to sing the praises of using Browserify with JavaScript--and keeping your JS (and self) sane!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Using Browserify with JavaScript (and Keeping Yourself Sane!)","og_description":"Camden is here to sing the praises of using Browserify with JavaScript--and keeping your JS (and self) sane!","og_url":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2015-03-18T16:13:34+00:00","article_modified_time":"2024-04-15T16:04:44+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/wds-default.png","type":"image\/png"}],"author":"Camden Segal","twitter_card":"summary_large_image","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Camden Segal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/"},"author":{"name":"Camden Segal","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/82ed512295976e49907010f3490989c2"},"headline":"Using Browserify with JavaScript (and Keeping Yourself Sane!)","datePublished":"2015-03-18T16:13:34+00:00","dateModified":"2024-04-15T16:04:44+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/"},"wordCount":737,"commentCount":0,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"keywords":["browserify","javascript","javascript in browser"],"articleSection":["Employee Post","Products","Products We Love","Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/","url":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/","name":"Using Browserify with JavaScript - WebDevStudios.com","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"datePublished":"2015-03-18T16:13:34+00:00","dateModified":"2024-04-15T16:04:44+00:00","description":"Camden is here to sing the praises of using Browserify with JavaScript--and keeping your JS (and self) sane!","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2015\/03\/18\/using-browserify-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"Using Browserify with JavaScript (and Keeping Yourself Sane!)"}]},{"@type":"WebSite","@id":"https:\/\/webdevstudios.com\/#website","url":"https:\/\/webdevstudios.com\/","name":"WebDevStudios","description":"WordPress Design and Development Agency","publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevstudios.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevstudios.com\/#organization","name":"WebDevStudios","url":"https:\/\/webdevstudios.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","width":173,"height":60,"caption":"WebDevStudios"},"image":{"@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/webdevstudios","https:\/\/x.com\/webdevstudios","http:\/\/instagram.com\/webdevstudios","https:\/\/www.linkedin.com\/company\/webdevstudios-llc-\/"]},{"@type":"Person","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/82ed512295976e49907010f3490989c2","name":"Camden Segal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b061c568ad94847a4b510bf61fea026ebfa04e4da98f5e3229f11fd2c53b48e7?s=96&d=mm&r=g4d2650ff7fd93cb54809dd154b7add1c","url":"https:\/\/secure.gravatar.com\/avatar\/b061c568ad94847a4b510bf61fea026ebfa04e4da98f5e3229f11fd2c53b48e7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b061c568ad94847a4b510bf61fea026ebfa04e4da98f5e3229f11fd2c53b48e7?s=96&d=mm&r=g","caption":"Camden Segal"},"url":"https:\/\/webdevstudios.com\/author\/camden\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-2O5","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/10793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=10793"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/10793\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=10793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=10793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=10793"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=10793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}