Don't underestimate npm – aka npm + napa + Browserify – aka npm makes Grunt and Bower (almost) useless and Browserify rocks

View Github Repository Open presentation in a new window

DjebbZ

See all presentation from DjebbZ

Don't underestimate npm – aka npm + napa + Browserify – aka npm makes Grunt and Bower (almost) useless and Browserify rocks

0 0

npm-paris-js

npm talk for Paris.js #33

On Github DjebbZ / npm-paris-js

Don't underestimate npm

aka npm + napa + Browserify

aka npm makes Grunt and Bower (almost) useless and Browserify rocks

Paris.js #33, January 29th 2013, @Dj3bbZ

npm is :

(choose the right answers)

  • A package manager for Node.js ?
  • A repository for anything ?
  • A task manager ?
  • A build tool ?
  • A swiss army knife ?

A package manager for Node.js ?

Source: http://stuartmcghee.deviantart.com/art/Captain-Obvious-339839060

A package manager for Node.js ? Really ?

Contrary to the belief of many, "npm" is not in fact an abbreviation for "Node Package Manager". It is a recursive bacronymic abbreviation for "npm is not an acronym". Node.js FAQ

A package manager for Node.js ? Really ? (2)

npm is for packages, not Node.js modules.

A package is a folder containing a program described by a package.json file Node.js FAQ

A repository for anything ?

It could work, if only package.json wasn't required...

Bower does this already.

napa to the rescue !

napa is a small npm plugin (<100 LOC !) for installing repos without a package.json with npm

{
  "scripts": {
    "install": "napa"
  },
  "napa": {
    "foo": "username/repo",
    "bar": "git@example.com:user/repo",
    "woo": "username/repo#v1.2.3",
    "bam": "username/bar#some-branch",
    "baz": "username/baz#347259472813400c7a982690acaa516292a8be40",
    "qoo": "https://example.com/downloads/release.tar.gz"
  }
}

A task manager ?

npm can run arbitrary scripts

npm run <myscript> 
{
    "scripts": {
        "test": "mocha --reporter spec --timeout 1000",
        "build-js": "uglifyjs src/app.js > build/app.js",
        "build-css": "cat css/reset/*.css css/app/*.css > build/app.css",
        "build": "npm run build-js && npm run build-css",
        "pbuild": "npm run build-js & npm run build-css"
    }
}

Bonus : local packages with a "bin" property are available.No more global modules \o/

A task manager ? (2)

  • Much simpler than Grunt (or equivalent)
  • Can call custom scripts (shell, node.js, php/python/whatever)
  • Only caveat : not possible (yet) to pass args to scripts.

A build tool ?

Scripts can be used like makefiles. Browserify can build your code, and is super flexible.

Write code like Node.js modules, Browserify packages it for you

{
    "scripts": {
        "build-js": "browserify src/app.js > build/app.js"
    }
}
Works with scripts that exposes global variables, Node.js modules, AMD modules, ES6 modules (!). More info

A swiss army knife ?

If you need Grunt, Bower, you already have npm.

That's (generally) all you need.

Remember, Less is more.

THE END

Questions ?

BY Khalid Jebbari / @Dj3bbZ

Slides are published here : djebbz.github.io/npm-paris-js