THE PROJECTOR WORKS · Bundle browserify browserify webpack. @certsimplessl @mikemaccana Webpack?
Browserify
14
Browserify npm all things. @davechubbuck https://github.com/davidchubbs
-
Upload
davidchubbs -
Category
Technology
-
view
322 -
download
0
Transcript of Browserify
Browserifynpm all things.
@davechubbuck https://github.com/davidchubbs
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.
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; });};
How do we bundle these modules for the browser?
Quick Start# install Browserifynpm 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.jsbrowserify app.js -o bundle.js
# then in the browser:# <script src=“bundle.js”></script># DONE!
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
Transforms
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" }}
// gulpfile.jsvar 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});
app.jsx
templates
Family.jsx
Female.jsx
public
index.html
bundle.min.js
gulpfile.js
node_modules
package.json
/** @jsx React.DOM */
var React = require('react');var Family = require('./templates/Family');
React.renderComponent( <Family females={3} males={2} />, document.getElementById('app'));
Male.jsx
Female.jsxMale.jsx
app.jsx
templates
Family.jsx
public
index.html
bundle.min.js
gulpfile.js
node_modules
package.json
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> ); }});
Female.jsxMale.jsx
app.jsx
templates
Family.jsx
public
index.html
bundle.min.js
gulpfile.js
node_modules
package.json
var React = require('react');
module.exports = React.createClass({ render: function () { return <i class=‘fa fa-female’ />; }});
Female.jsxMale.jsx
app.jsx
templates
Family.jsx
public
index.html
bundle.min.js
gulpfile.js
node_modules
package.json
var React = require('react');
module.exports = React.createClass({ render: function () { return <i class=‘fa fa-male’ />; }});
Female.jsxMale.jsx
app.jsx
templates
Family.jsx
public
index.html
bundle.min.js
gulpfile.js
node_modules
package.json
<!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>
Run gulp build in the project’s root directory, then open public/index.html in a browser…
