NPM and Building Locally

Part of learning React for me involved learning a bit about Node.JS and NPM (Node Package Manager), Webpack, and some of their associated tools.
A list of files in my node_modules folder
I do love writing code in the text editor (I currently use Atom) so getting used to the NPM way of doing things was a logical step in my learning. For anyone not familiar, NPM is a utility that tracks all of the tools you use to develop your website (node modules), keeps them up-to-date or at a certain release depending on your requirements, and makes it easy for anyone else to install your package by automatically including all the necessary modules.

All of this magic happens through a file called package.json.

Looking in my node_modules folder, I see a total of 848 files for my current project. This would be intimidating to try to manage on my own, but having NPM manage it for me means that I don’t need to know what’s in there. In fact, the first time I’ve looked in that folder was to take that picture. What I do pay attention to is the package.json file, which looks like this:

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "A place to show what I'm working on",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "NODE_ENV='production' webpack -p",
    "deploy": "npm run build && firebase deploy",
    "firebase-init": "firebase login && firebase init"
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ]
  },
  "author": "Kyle Holm",
  "license": "ISC",
  "dependencies": {
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "firebase-tools": "^3.6.1",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.3.0",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Even this can appear daunting, but most of this is generated automatically when running commands in the console. In fact, the only lines I had to add manually are the "scripts": entries and the "babel": entries.

Looking at each section of this file makes it a bit less intimidating. All we have is a bunch of key/value pairs, each with a specific purpose. I’m not going to go into details about all the things happening in this file, but everything in my node_modules folder gets managed right here.

I’ve heard that there are other package managers out there, and maybe someday I will branch out and give them a try. For today, I really like using NPM and all the hard work it does for me. When I team it up with Webpack, I feel like I can really focus more on creating, and less on the tools I use to create. I’ll talk more about Webpack later.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s