Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Browserify

1.426 Aufrufe

Veröffentlicht am

Getting started with Browserify

Veröffentlicht in: Technologie

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…

×