PageSourceSearch

https://browserify.org/articles.html

html browserify.org collected 2026-09-24 15:31:48 UTC 21,766 bytes, 364 lines download raw bytes

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 &amp; 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.