1<html lang="en"> 2 <head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <title>Browserify</title> 6 <link rel="shortcut icon" href="favicon.ico"> 7 <link rel="stylesheet" href="style.css" type="text/css" media="screen"title="no title" charset="utf-8"> 8 </head> 9 <body class="style-a articles"> 10 <section id="top-home-section" class="top-section color-a"> 11 <center> 12 <h1>Browserify Articles</h1> 13 <h3 id="top-subtitle" class="large-font">Resources for learning the ins and outs of using Browserify, written by the community.</h3> 14 <a href="index.html"> 15 <button class="top-button" id="top-button2"> 16 Home 17 </button> 18 </a> 19 <a href="https://github.com/substack/browserify-website/blob/gh-pages/articles.html"> 20 <button class="top-button" id="top-button2"> 21 Source 22 </button> 23 </a> 24 </center> 25 </section> 26 <section class="articles" class="color-b" > 27 <div class="content"> 28 <article class="markdown-body entry-content" itemprop="mainContentOfPage"> 29 <h2> 30 <a name="introductions--the-basics-of-browserify" class="anchor" href="#introductions--the-basics-of-browserify"><span class="octicon octicon-link"></span></a>Introductions / Browserify basics</h2> 31 32 <p>These articles give a great introduction to using <a href="https://github.com/browserify/browserify">Browserify</a>.</p> 33 34 35 <h3> 36 <a name="handbook" class="anchor" href="#handbook"><span class="octicon octicon-link"></span></a>Browserify Handbook</h3> 37 38 <p><a href="https://github.com/substack/browserify-handbook">github.com/substack/browserify-handbook</a> 39 </p> 40 <p>This document written by @substack covers how to use browserify to build modular applications. Recommended as a starting point.</p> 41 42 <h3> 43 <a name="introduction-to-browserify" class="anchor" href="#introduction-to-browserify"><span class="octicon octicon-link"></span></a>Introduction to Browserify</h3> 44 45 <p><a href="http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify">superbigtree.tumblr.com/post/54873453939/introduction-to-browserify</a> 46 </p> 47 <p>The basics of writing modules for the browser using node.js core modules 48 and modules from npm.</p> 49 50 51 <h3> 52 <a name="frontend-dependency-management" class="anchor" href="#frontend-dependency-management"><span class="octicon octicon-link"></span></a>Frontend Dependency Management with Browserify from Bit.ly Engineering</h3> 53 54 <p><a href="http://word.bitly.com/post/101360133837/browserify">http://word.bitly.com/post/101360133837/browserify</a> 55 </p> 56 <p>A great introductory article from Bit.ly engineering about Browserify and how they used it on a recent project.</p> 57 58 <h3> 59 <a name="untangle-your-javascript-with-browserify" class="anchor" href="#untangle-your-javascript-with-browserify"><span class="octicon octicon-link"></span></a>Untangle Your JavaScript with Browserify</h3> 60 61 <p><a href="http://lincolnloop.com/blog/untangle-your-javascript-browserify/">http://lincolnloop.com/blog/untangle-your-javascript-browserify</a> 62 </p> 63 <p>A straightforward introduction to browserify, including integration with 64 Grunt and Gulp.</p> 65 66 <h3> 67 <a name="how-browserify-works" class="anchor" href="#how-browserify-works"><span class="octicon octicon-link"></span></a>How Browserify Works</h3> 68 69 <p><a href="http://benclinkinbeard.com/posts/how-browserify-works/">benclinkinbeard.com/posts/how-browserify-works/</a> 70 </p> 71 <p>A basic introduction to how Browserify does what it does.</p> 72 73 74 <h3> 75 <a name="unix-in-the-browser" class="anchor" href="#unix-in-the-browser"><span class="octicon octicon-link"></span></a>Browserify: Unix In The Browser</h3> 76 77 <p><a href="http://thinkingonthinking.com/unix-in-the-browser/">thinkingonthinking.com/unix-in-the-browser</a> 78 </p> 79 <p>
79Another basic introduction to Browserify and NPM.</p> 80 81 <h3> 82 <a name="sharing-code-between-nodejs-and-the-browser" class="anchor" href="#sharing-code-between-nodejs-and-the-browser"><span class="octicon octicon-link"></span></a>Sharing code between Node.js and the browser</h3> 83 84 <p><a href="https://blog.codecentric.de/en/2014/02/cross-platform-javascript/">https://blog.codecentric.de/en/2014/02/cross-platform-javascript/</a> 85 </p> 86 <p>A detailed introduction to Browserify and Grunt.js and how to leverage 87 Browserify to write code that runs on Node.js and in the browser.</p> 88 89 <h3> 90 <a name="using-npm-on-the-client-side" class="anchor" href="#using-npm-on-the-client-side"><span class="octicon octicon-link"></span></a>Using npm on the client side</h3> 91 92 <p><a href="http://dontkry.com/posts/code/using-npm-on-the-client-side.html">dontkry.com/posts/code/using-npm-on-the-client-side.html</a> 93 </p> 94 <p>A very thorough introduction to using npm, Browserify, and Grunt.js.</p> 95 96 <h3> 97 <a name="npm-everywhere-slides" class="anchor" href="#npm-everywhere-slides"><span class="octicon octicon-link"></span></a>NPM Everywhere (Slides)</h3> 98 99 <p><a href="http://slid.es/azer/npm">NPM Everywhere</a> 100 </p> 101 <p>Slides for introducing front-end people NPM, Browserify and their benefits.</p> 102 103 <h3> 104 <a name="introduction-to-browserify-1" class="anchor" href="#introduction-to-browserify-1"><span class="octicon octicon-link"></span></a>Introduction to Browserify</h3> 105 106 <p><a href="http://blakeembrey.com/articles/2013/09/introduction-to-browserify/">blakeembrey.com/articles/2013/09/introduction-to-browserify/</a> 107 </p> 108 <p>Another great look at the basics of Browserify.</p> 109 110 <h3> 111 <a name="node-packaged-modules-bringing-npm-modules-to-the-web" class="anchor" href="#node-packaged-modules-bringing-npm-modules-to-the-web"><span class="octicon octicon-link"></span></a>Node Packaged Modules, bringing npm modules to the web</h3> 112 113 <p><a href="http://maxogden.com/node-packaged-modules.html">maxogden.com/node-packaged-modules.html</a> 114 </p> 115 <p>A rundown of projects that have made developing with browserify more accessible 116 and more interesting: requirebin.netlify.app, npmsearch.com, and Browserify CDN.</p> 117 118 <h3> 119 <a name="browserify-and-the-universal-module-definition" class="anchor" href="#browserify-and-the-universal-module-definition"><span class="octicon octicon-link"></span></a>Browserify and the Universal Module Definition</h3> 120 121 <p><a href="http://dontkry.com/posts/code/browserify-and-the-universal-module-definition.html">dontkry.com/posts/code/browserify-and-the-universal-module-definition.html</a> 122 </p> 123 <p>An awesome look at the possibilities for using Browserify to bundle modules 124 written in AMD, CommonJS/node.js, UMD, ECMAscript 6, and global modules.</p> 125 126 <h3> 127 <a name="standalone-browserify-builds" class="anchor" href="#standalone-browserify-builds"><span class="octicon octicon-link"></span></a>Standalone Browserify Builds</h3> 128 129 <p><a href="http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds">www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds</a> 130 </p> 131 <p>Particularly interesting for people using Browserify as part of the development 132 workflow on a javascript library, check out this article for learning how 133 to generate standalone Browserify builds.</p> 134 135 <h3> 136 <a name="browserify-v2-adds-source-maps" class="anchor" href="#browserify-v2-adds-source-maps"><span class="octicon octicon-link"></span></a>Browserify v2 adds source maps</h3> 137 138 <p><a href="http://thlorenz.com/blog/browserify-v2-adds-source-maps">thlorenz.com/blog/browserify-v2-adds-source-maps</a> 139 </p> 140 <p>Learn about using source maps with Browserify in this article.</p> 141 142 <h3> 143 <a name="browserify-smalljs" class="anchor" href="#browserify-smalljs"><span class="octicon octicon-link"></span></a>Browserify on Small.js</h3> 144 145 <p><a href="http://smalljs.org/package-managers/npm/browserify/">smalljs.org/package-managers/npm/browserify/</a></p> 146 <p>Yet another introductory article about Browserify. Covers basic workflow, transforms, source maps, automation, RequireBin, and how to play nice with popular frameworks.</p> 147 148 <h3> 149 <a name="browserify-guide-chinese-version" class="anchor" href="#browserify-guide-chinese-version"><span class="octicon octicon-link"></span></a>Browserify䏿çä½¿ç¨æå</h3> 150 151 <p><a href="http://zhaoda.net/2015/10/16/browserify-guide/">zhaoda.net/2015/10/16/browserify-guide/</a></p> 152 <p>Guide to the use of the Chinese version of the Browserify.</p> 153 154 <h2> 155 <a name="usage-of-browserify" class="anchor" href="#usage-of-browserify"><span class="octicon octicon-link"></span></a>Usage of browserify</h2> 156 157 <p>For examples of using browserify with various javascript libraries, check 158 out these articles.</p> 159 160 161 <h3> 162 <a name="a-year-with-browserify" class="anchor" href="#a-year-with-browserify"><span class="octicon octicon-link"></span></a>A Year With Browserify</h3> 163 164 <p><a href="http://aeflash.com/2014-03/a-year-with-browserify.html">aeflash.com/2014-03/a-year-with-browserify.html</a> 165 </p> 166 <p>"Along the way, I've learned a lot about the whole Browserify process, some tricks, and some pitfalls."</p> 167 168 169 <h3> 170 <a name="using-angular-and-grunt-with-browserify" class="anchor" href="#using-angular-and-grunt-with-browserify"><span class="octicon octicon-link"></span></a>Using angular and grunt with browserify</h3> 171 172 <p><a href="http://dontkry.com/posts/code/angular-browserify-grunt.html">dontkry.com/posts/code/angular-browserify-grunt.html</a> 173 </p> 174 <p>Using angular.js with browserify is suprisingly straightforward as shown 175 in this post.</p> 176 177 <h3> 178 <a name="basics-of-making-maps-with-leafletjs-and-browserify" class="anchor" href="#basics-of-making-maps-with-leafletjs-and-browserify"><span class="octicon octicon-link"></span></a>Basics of making maps with leaflet.js and browserify</h3> 179 180 <p><a href="http://learnjs.io/blog/2013/11/08/leaflet-basics/">learnjs.io/blog/2013/11/08/leaflet-basics</a> 181 </p> 182 <p>Leaflet.js is a great mapping library, and this tutorial shows how you 183 can use it with browserify.</p> 184 185 <h3> 186 <a name="backbone--jquery-meet-browserify-easy" class="anchor" href="#backbone--jquery-meet-browserify-easy"><span class="octicon octicon-link"></span></a>Backbone & jQuery meet Browserify: easy.</h3> 187 188 <p><a href="http://learnjs.io/blog/2013/11/23/backbone-jquery-browserify">learnjs.io/blog/2013/11/23/backbone-jquery-browserify</a> 189 </p> 190 <p>An introduction to using backbone and jquery with browserify.</p> 191 192 <h3> 193 <a name="gruntbrowserifynpmapplicationsuccess" class="anchor" href="#gruntbrowserifynpmapplicationsuccess"><span class="octicon octicon-link"></span></a>grunt+browserify+npm+application=success</h3> 194 195 <p><a href="http://codeofrob.com/entries/grunt+browserify+npm+application=success.html">codeofrob.com/entries/grunt+browserify+npm+application=success.html</a> 196 </p> 197 <p>A good rundown of using Grunt.js with Browserify.</p> 198 199 <h3> 200 <a name="gulpbrowserifystarterfaq" class="anchor" href="#gulpbrowserifystarterfaq"><span class="octicon octicon-link"></span></a>gulp browserify starter faq</h3> 201 202 <p><a href="http://viget.com/extend/gulp-browserify-starter-faq">http://viget.com/extend/gulp-browserify-starter-faq</a></p> 203 <p>How to start an application with gulp and browserify, including a 204 <a href="https://github.com/vigetlabs/gulp-starter/tree/1.0.0">starter repo</a></p> 205 206 <h2> 207 <a name="related-tools" class="anchor" href="#related-tools"><span class="octicon octicon-link"></span></a>Related tools</h2> 208 209 <p>
209Browserify fits in well with other development tools. Check out some of 210 the ones most commonly used with Browserify.</p> 211 212 <h3> 213 <a name="beefy" class="anchor" href="#beefy"><span class="octicon octicon-link"></span></a>Beefy</h3> 214 215 <p><a href="http://didact.us/beefy/">didact.us/beefy</a> 216 </p> 217 <p>Beefy is a great tool for running a development server that will automatically 218 reload the browser and serve a newly generated bundle.js file each time 219 you save a project file.</p> 220 221 <h3> 222 <a name="grunt-browserify" class="anchor" href="#grunt-browserify"><span class="octicon octicon-link"></span></a>grunt-browserify</h3> 223 224 <p><a href="https://github.com/jmreidy/grunt-browserify">github.com/jmreidy/grunt-browserify</a> 225 </p> 226 <p>A plugin for using browserify with grunt.</p> 227 228 <h3> 229 <a name="chem" class="anchor" href="#chem"><span class="octicon octicon-link"></span></a>chem</h3> 230 231 <p><a href="https://github.com/superjoe30/chem/">github.com/superjoe30/chem</a> 232 </p> 233 <p>Canvas-based game engine and toolchain optimized for rapid development. 234 Chem uses browserify to compile your code. Check out some of the <a href="https://github.com/hughsk/game-modules/wiki/Modules">useful npm packages for games</a>.</p> 235 236 <h2> 237 <a name="comparisons-to-similar-tools" class="anchor" href="#comparisons-to-similar-tools"><span class="octicon octicon-link"></span></a>Comparisons to similar tools</h2> 238 239 <p>Browserify is used primarily with npm. Both of those tools have similar 240 counterparts like Bower and RequireJS. These articles help explain some 241 of the differences.</p> 242 243 <h3> 244 <a name="journey-from-requirejs-to-browserify" class="anchor" href="#journey-from-requirejs-to-browserify"><span class="octicon octicon-link"></span></a>Journey from RequireJS to Browserify</h3> 245 246 <p><a href="http://esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify">esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify</a> 247 </p> 248 <p>A thorough explanation of switching from RequireJS to Browserify.</p> 249 250 <h3> 251 <a name="2013-a-client-side-package-manager-oddyssey" class="anchor" href="#2013-a-client-side-package-manager-oddyssey"><span class="octicon octicon-link"></span></a>2013: A client side package manager oddyssey</h3> 252 253 <p><a href="http://calvinmetcalf.com/post/61957209713/2013-a-client-side-package-manager-oddyssey">calvinmetcalf.com/post/61957209713/2013-a-client-side-package-manager-oddyssey</a> 254 </p> 255 <p>A series of posts exploring package managers for client side code. Includes 256 npm/Browserify.</p> 257 258 <h3> 259 <a name="my-strategy-for-client-side-package-managers-choosing-between-npm-bower-and-component" class="anchor" href="#my-strategy-for-client-side-package-managers-choosing-between-npm-bower-and-component"><span class="octicon octicon-link"></span></a>My strategy for client-side package managers (choosing between npm, bower, and component)</h3> 260 261 <p><a href="http://superbigtree.tumblr.com/post/58075340096/my-strategy-for-client-side-package-managers-choosing">superbigtree.tumblr.com/post/58075340096/my-strategy-for-client-side-package-managers-choosing</a> 262 </p> 263 <p>Exploring the differences between npm, bower, and component.</p> 264 265 <h3> 266 <a name="browserify-vs-component" class="anchor" href="#browserify-vs-component"><span class="octicon octicon-link"></span></a>Browserify vs. Component</h3> 267 268 <p><a href="http://www.forbeslindesay.co.uk/post/44144487088/browserify-vs-component">www.forbeslindesay.co.uk/post/44144487088/browserify-vs-component</a> 269 </p> 270 <p>A comparison of Browserify and Component.</p> 271 272 <h2> 273 <a name="resources" class="anchor" href="#resources"><span class="octicon octicon-link"></span></a>Resources</h2> 274 275 276 <h3> 277 <a name="browserify-documentationgithub-repository" class="anchor" href="#browserify-documentationgithub-repository"><span class="octicon octicon-link"></span></a>Browserify documentation/github repository</h3> 278 279 <p><a href="https://github.com/browserify/browserify#browserify">github.com/browserify/browserify#browserify</a> 280 </p> 281 <p>Read the Browserify docs! Also check out the <a href="https://github.com/browserify/browserify/issues">issues</a>.</p> 282 283 284 <h3> 285 <a name="browserify-documentationgithub-repository" class="anchor" href="#browserify-documentationgithub-repository"><span class="octicon octicon-link"></span></a>Art Of Node - How Require Works</h3> 286 287 <p><a href="https://github.com/maxogden/art-of-node/#modular-development-workflow">maxogden/art-of-node/#modular-development-workflow</a> 288 </p> 289 <p>Part of a larger Node tutorial. Explains how require works and gives examples of how to develop software using Node modules.</p> 290 291 <h3> 292 <a name="nodejs-modules-documentation" class="anchor" href="#nodejs-modules-documentation"><span class="octicon octicon-link"></span></a>node.js modules documentation</h3> 293 294 <p><a href="http://nodejs.org/docs/latest/api/modules.html#modules_modules">nodejs.org/docs/latest/api/modules.html#modules_modules</a> 295 </p> 296 <p>To write modules for the browser using Browserify, you'll use the node.js 297 module system, and it's a good idea to check out the code node.js module 298 documentation.</p> 299 300 <h3> 301 <a name="packages-tagged-with-browserify-on-npm" class="anchor" href="#packages-tagged-with-browserify-on-npm"><span class="octicon octicon-link"></span></a>Packages tagged with browserify on npm</h3> 302 303 <p><a href="https://npmjs.org/browse/keyword/browserify">npmjs.org/browse/keyword/browserify</a> 304 </p> 305 <p>Check out the modules tagged with browserify on npm.</p> 306 307 <h3> 308 <a name="browserify-on-stackoverflow" class="anchor" href="#browserify-on-stackoverflow"><span class="octicon octicon-link"></span></a>Browserify on StackOverflow</h3> 309 310 <p><a href="http://stackoverflow.com/questions/tagged/browserify">stackoverflow.com/questions/tagged/browserify</a> 311 </p> 312 <p>Check out the questions being asked about Browserify on StackOverflow.</p> 313 314 <h2> 315 <a name="videos" class="anchor" href="#videos"><span class="octicon octicon-link"></span></a>Videos</h2> 316 317 318 <h3> 319 <a name="browserify-v2-and-you" class="anchor" href="#browserify-v2-and-you"><span class="octicon octicon-link"></span></a>Browserify V2 and you</h3> 320 321 <p><a href="http://vimeo.com/62988591">vimeo.com/62988591</a> 322 </p> 323 <p>Creator of Browserify James Halliday (<a href="https://twitter.com/substack">@substack</a>) 324 gives a rundown of the changes that came through in version 2 of the project.</p> 325 326 <h3> 327 <a name="modular-js-video" class="anchor" href="#modular-js-video"><span class="octicon octicon-link"></span></a>Modular JavaScript With Npm And Node Modules</h3> 328 329 <p><a href="http://ericleads.com/2014/03/modular-javascript-with-npm-and-node-modules/">ericleads.com/2014/03/modular-javascript-with-npm-and-node-modules</a> 330 </p> 331 <p>Eric Elliot recorded this screencast version of a talk he gave about using modules to write JS programs.</p> 332 333 <h3> 334 <a name="videos-getting-started-with-browserify" class="anchor" href="#videos-getting-started-with-browserify"><span class="octicon octicon-link"></span></a>Getting Started With Browserify</h3> 335 336 <p><a href="https://www.youtube.com/watch?v=CTAa8IcQh1U">youtube.com/watch?v=CTAa8IcQh1U</a> 337 </p> 338 <p>A 10 minute screencast to quickly get you bundling with Browserify.</p> 339 340 <h3> 341 <a name="videos-transforms-with-browserify" class="anchor" href="#videos-transforms-with-browserify"><span class="octicon octicon-link"></span></a>Transform Your Bundles With Browserify</h3> 342 343 <p><a href="https://www.youtube.com/watch?v=Uk2bgp8OLT8">youtube.com/watch?v=Uk2bgp8OLT8</a> 344 </p> 345 <p>A 10 minute screencast about how to use and write Browserify transforms.</p> 346 347 <h2> 348 <a name="testing" class="anchor" href="#testing"><span class="octicon octicon-link"></span></a>Testing</h2> 349 350 <h3> 351 <a name="how-i-write-tests-for-node-and-the-browser" class="anchor" href="#how-i-write-tests-for-node-and-the-browser"><span class="octicon octicon-link"></span></a> 352 How I Write Tests for Node and the Browser 353 </h3> 354 <p><a href="http://substack.net/how_I_write_tests_for_node_and_the_browser">substack.net/how_I_write_tests_for_node_and_the_browser</a></p> 355 <p> 356 Write unit tests that work in node and the browser. 357 </p> 358 359 </article> 360 </div> 361 </section> 362 363 </body> 364</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.