Download to read offline
Lightning Talk: Making JS better with Browserify
- 1. brows·er·if·y Javascript module managementfor mere mortals
- 2.
- 3. My Application jQuery underscore Application CodeLibrary Code Linker
- 4. My Application jQuery underscore Application CodeLibrary Code global variables
- 5. Module management with globals Modulesindividually included on the page Share a global namespace Inclusion order must be manually calculated
- 6. –browserify.org “Browserify lets you require('modules')in the browser by bundling up all of your dependencies.”
- 7. Module management with browserify Modulesare scoped in their own namespace Uses CommonJS standard interface Dependencies defined using require function Modules are defined by assigning an object to module.exports Exactly like node.js
- 8. var $ =require(‘jquery’); $(‘body’).html(“Browserify saves the day”); main.js
- 9. ~/$ npm installjquery --save ~/$ browserify main.js -o bundle.js Build process
- 10. var MyModel =function() { … } module.exports = MyModel; models/MyModel.js
- 11. var $ =require(‘jquery’), _ = require(‘underscore’), MyModel = require(‘../models/MyModel’); main.js
- 12. Where to fromhere? Detailed documentation: http://bit.ly/1kbozFB grunt-browserify: wrapper for integration into Grunt build with other tools, like uglify. exorcist: extract source maps for browsers. Very useful, terrible name. watchify: CLI file watcher for performing automatic builds during development.
- 13.