Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Browserify

1,346 views

Published on

Getting started with Browserify

Published in: Technology

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…

×