Browserify

1,298 views

Published on

Getting started with Browserify

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
1,298
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
7
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Browserify

  1. 1. Browserify npm all things. @davechubbuck https://github.com/davidchubbs
  2. 2. Browserify gives us a way to bundle our modules into a single file for use in the browser. Furthermore, Browserify let’s you use require in your modules, so you can write modules that work on both Node.js + the browser.
  3. 3. Quick Start // say we have the following node modules... // app.js var double = require('./lib/double'); console.log(double([1, 2, 3])); //=> [2, 4, 6] // lib/double.js var _ = require('underscore'); module.exports = function (numbers) { return _.map(numbers, function (num) { return num * 2; }); };
  4. 4. How do we bundle these modules for the browser?
  5. 5. Quick Start # install Browserify npm install -g browserify # install any npm modules that your modules use (if you haven’t already) # start at file app.js and recursively bundle every module `require`d # then output as a single file called bundle.js browserify app.js -o bundle.js # then in the browser: # <script src=“bundle.js”></script> # DONE!
  6. 6. Transforms Browserify includes source transforms, which lets you “transform source code before parsing it for require() calls” 1 List of browserify transforms: https://github.com/ substack/node-browserify/wiki/list-of-transforms
  7. 7. Getting Fancier w/ Gulp // package.json { "name": “family-example", "version": "1.0.0", "description": "Browersify + Gulp + React.js”, "devDependencies": { "browserify": "~5.11", "gulp": "~3.8", "gulp-uglify": "~1.0", "jshintify": "^0.1.0", "react": "~0.11", "reactify": "~0.14", "vinyl-buffer": "0.0.0", "vinyl-source-stream": "~0.1" } }
  8. 8. // gulpfile.js var gulp = require('gulp'), browserify = require('browserify'), reactify = require('reactify'), jshintify = require('jshintify'), uglify = require('gulp-uglify'), source = require('vinyl-source-stream'), buffer = require('vinyl-buffer'); gulp.task('build', function () { return browserify({ entries: ['./app.jsx'], // starting module for browserify extensions: ['.jsx', '.js'], // .jsx is for React.js templates debug: (process.env.NODE_ENV === ‘production') // used by React.js }) .transform(reactify) // react.js browserify transform .transform(jshintify) // jshint browserify transform .bundle() // bundle modules .pipe(source('bundle.min.js')) // filename to save as .pipe(buffer()) // stream => buffer .pipe(uglify()) // minify js .pipe(gulp.dest('./public/')); // save to output directory });
  9. 9. app.jsx gulpfile.js node_modules package.json public bundle.min.js index.html templates Family.jsx Female.jsx /** @jsx React.DOM */ var React = require('react'); var Family = require('./templates/Family'); React.renderComponent( <Family females={3} males={2} />, document.getElementById('app') ); Male.jsx
  10. 10. app.jsx gulpfile.js node_modules package.json public bundle.min.js index.html templates Family.jsx Female.jsx Male.jsx var React = require('react'); var Male = require('./Male'); var Female = require('./Female'); module.exports = React.createClass({ getDefaultProps: function () { return {females:0, males:0}; }, render: function () { var persons = []; var males = this.props.males, females = this.props.females; while (females--) persons.push(<Female />); while (males--) persons.push(<Male />); return ( <div class='family'> <p>{persons}</p> </div> ); } });
  11. 11. app.jsx gulpfile.js node_modules package.json public bundle.min.js index.html templates Family.jsx Female.jsx Male.jsx var React = require('react'); module.exports = React.createClass({ render: function () { return <i class=‘fa fa-female’ />; } });
  12. 12. app.jsx gulpfile.js node_modules package.json public bundle.min.js index.html templates Family.jsx Female.jsx Male.jsx var React = require('react'); module.exports = React.createClass({ render: function () { return <i class=‘fa fa-male’ />; } });
  13. 13. app.jsx gulpfile.js node_modules package.json public bundle.min.js index.html templates Family.jsx Female.jsx Male.jsx <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Family</title> <link href="http://maxcdn.bootstrapcdn.com/ font-awesome/4.2.0/css/font-awesome.min.css" /> </head> <body> <div id="app"></div> <script src="bundle.min.js"></script> </body> </html>
  14. 14. Run gulp build in the project’s root directory, then open public/index.html in a browser…

×