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