NPM AND
BROWSERIFY
NPM
- a JavaScript package manager
- holds "modules"
- some chunk of re-usable code
- may be a command-line tool
- dependency management
- version management
BROWSERIFY
- a build tool for the browser
- we can use NPM for front-end code
- lots of cool features, like source transforms
LOOK FAMILIAR?
don't forget that config...
this is how i feel
In Browserify...
some goodies...
- cleaner syntax
- shimming is easy
- no config files
- don't need to manually maintain paths
- source transforms (domify, brfs, etc)
- parity with Node APIs: buffers, events, url, etc
- code shared between front- and back-end
but the best features...
NPM and Unix Philosophy
SEMANTIC VERSIONING
unix philosophy
“... write programs that do one thing
and do it well ...”
example
We are working on a library/website that needs
to parse CSS color strings.
step 1
does it already exist?
step 2
if it doesn't exist or isn't suitable
Time to write a module!
overview
npm init
npm install
browserify
beefy
semantic versioning
2.0.1
-
major - breaking API change
-
minor - non-breaking new feature
-
patch - non-breaking bugfix
patching our module....
Simple bug fix
adding new features?
Best to keep things backward-compatible
npm version minor major changes
Sometimes you just gotta break it...
npm version major
moar knowledge
umd build
good for AMD and non-Node environments
browserify index.js -o colorstring.js -s colorstring
watchify
faster build times
same parameters as browserify
gulp and grunt integration
watchify index.js -o colorstring.js
brfs
source transform for 'fs' (Node API)
glslify
- modular GLSL code
- e.g. npm install glsl-noise
- useful for non-JS environments
- publishing GLSL snippets in NPM
- making changes to the language!
npm ruN
npm run build and everything else...
NPM &BROWSERIFY
By Matt DesLauriers
