Setting up a JavaScript project: Prerequisites

Every JavaScript project has a package.json

The package.json is the file that describes the project, lists its dependencies (i.e random-item in our previous example) and commands. It can contain much more than that though, feel free to have a look at the full list of properties if you are curious. To create this file, you can run the command npm init at the root of your project. It will guide you through a few questions and create the package.json file at the end of the process.

Example of a package.json with the default options.

Tracking development and production dependencies

Unless you want to do it like in the good old jQuery days, tooling has become almost unavoidable in a JavaScript project. For example, the language’s latest features are not supported by all browsers so it’s pretty common to compile the code to something that can be executed by anyone’s browser. For that, you would need to install Babel. But then, if you want to split your code into separate files and use imports you would also need Webpack. CSS you said? That’s something of the past, you should consider styled components, CSS modules or Aphrodite. I could continue like that for a long time but you get the idea: there are a lot of things you might (or might not) want to install. Don’t be afraid though, the whole purpose of this serie is to install as few packages as possible.

npm install parcel-bundler --save-dev
The “devDependencies” property was added.
import randomItem from 'random-item';

const colors = [
'red',
'yellow',
'orange',
'pink',
'green'
];

window.document.body.style.backgroundColor = randomItem(colors);
npm install random-item
The “dependencies” property was added.

Create shortcut commands with npm scripts

scripts is a package.json’s property that contains shortcut commands. If you wanted to alias the previous command to “start”, you could do the following:

parcel index.html --port 3000 --log-level 0 --open
./node_modules/.bin/parcel index.html --port 3000 --log-level 0 --open

The conventions

The NPM CLI comes in with a few conventions. For example, the command to start a project is usually “start” and the one to test is “test”. For these commands, you can omit the “run” part in npm run start so npm start is equivalent. There are other official conventions but they are not as common as these two.

Wrapping up

That is enough NPM to get a JavaScript project running. I wanted to dedicate a whole article to NPM because I come too often across missing dependencies in the package.json and an unclear workflow to start and contribute when browsing juniors’ projects. The idea to keep in mind is that it should be simple for you, your future you getting back to the project later and possibly another developer.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store