I was surprised to not find an easy, setting up backbone with npm. The popular tutorials seem to take some shortcuts to get you in the code quickly. I really wanted to know how to get set fo’ reals. after all, I want to start working with backbone not because I think it will be good for me, but because I want to make something.
Setting up package.json
npm will use a JSON file called
package.json to express dependencies
and provide information about the file. Ruby programmers
package.json is the equivalent of a
Gemfile. Clojure’s equivalent
Getting the basics
easiest way to get started is to use the
npm init command to get the
very basics into the
npm init will walk you
through the steps to setup your app, after that you have a basic
project.json that looks something like,
So now we have the basic npm package setup, now we need to express our
dependencies. The conventions are important and specific. npm is going
to look for the
dependencies key at the top level. after that the
So the simplest thing that works for a simple backbone project just adds underscore, jquery and backbone.
Additionally, npm can do the work for you. if you want something in
your package json just type
npm install jsdom --save into your
console and npm will add it for you and install the dependency
Where is the structure?
Backbone does not decide a structure for you. Backbone only really cares that you use a REST interface and underscore.js. So the rest is up to you. This is a great chance to shoot yourself in the foot, but also part of what makes backbone great.
some sane defaults
I think that it makes sense to have dir for each of the what is a sections on the cdnjs docs. So the simple template I would start with is something like:
This way each folder is responsible for a particular type of file you are going to need in your backbone app.
Grunt for minifying and running tests
Now when I started with Backbone I wasted far too much time on my grunt file. What I ended up with was not that complicated.
First things first, we have our little magic incantation at the top of the file,
Then we setup concat to join all my files together,
After that we can uglify our script,
Then setup jshint and testing,
For extra credit we can setup jshit to watch our files and do whatever we would like when they change, for example, run the tests.