How to use Node modules with package.json

There are two main methods of arranging JavaScript code – via a library structure or through a framework. But if you go deeper, you’ll find that the code is often constructed in a way that results in a module.

A module is a functionality that can be imported or exported. Sometimes it comes along in the form of 3rd party libraries. Sometimes it comes bundled with the framework you’re using. 

Modules can be used in various parts of an application, bundled into or excluded in builds. However they are used and implemented, a module is essentially one of the many lego-like bricks that make up the pre-built functionalities of your application. 

What are node modules and how do you use them?

Node.js is a server runtime environment that runs JavaScript outside of a browser. Despite popular belief, node.js itself is not a framework. Rather, it’s the thing that allows frameworks and libraries to run. 

For frontend applications, you can run a JavaScript application without a server by just opening the browser, in addition to a lot of manual configuration. Backend apps need a runtime environment to run. 

Backend apps without an interface often come in the form of APIs or interact with the database. 

So, what exactly are modules?

Modules are clusters of code that are grouped based on functionality. They are highly self-contained, making them highly reusable and independent from one another.

When it comes to code, a way to import modules into your project is to use the require() function.

For example, to implement the third-party HTTP server module express, you can do so via your console. The node_modules folder is the default folder where all your 3rd-party libraries are downloaded to and served from.

To install, simply npm it.

npm install express

To import, create a const and call it in via require()

const express = require(‘express’);

To reference and use express, you can do so by initializing it.

const app = express()
app.get(‘/’, function(req, res) {
   res.send(‘Hello TabNine’)
})
app.listen(3000)

The functionality of package.json

Before we talk about the purpose and functionality of package.json, we need to have a clear understanding of npm.

npm is one of those things we use but may not actually know exactly what it does.  

So what is npm?

npm is a package manager. 

A package manager is a piece of software that automates the installation, upgrading, configuring and removing things from the space it covers. For npm, this means installing, upgrading, configuring and removing libraries and frameworks, in addition to kickstarting runtimes like node.js via npm commands. 

It saves you from manually having to code in all the different pathways and dependencies requires to make your JavaScript application run. 

Where does package.json come in?

package.json is a json file that npm uses by default to identify the project and handle all the declared dependencies. It is used as a starting point by npm and the information contained in this file to fetch and coordinate the various JavaScript libraries (packages) required by an application to run. 

You can create a package.json file via the console using npm init

When you run this command, it will give you a series of questions to answer via the console and generate a json file that contains a name, version, description, main (the entry point of your application), any scripts, the author, and license type. 

If you decided not to answer the questions in the console and come back to it later, your package.json file should look something like this:

{
  "name": "tabnine",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

By default, index.js is set as the main, but you can have it be whatever you want. 

How to add node modules into package.json

To add third-party modules into package.json automatically, run the --save flag when you install the module.

For example, in the above example, we used installed express for our project using npm. To have it added to our package.json, add the --save flag at the end. 

npm install express --save 

The --save flag essentially tells npm to save express as a dependency. If it doesn’t exist, it will create a new dependencies object in your package.json file that looks something like this:

"dependencies": {
    "express": "^4.17.1"
  }

Otherwise, npm will just add it to the dependencies object. By default, npm will look to your node_module folder to find the dependencies. 

You can also use --save-dev to make a particular module only available in the development environment. When you use --save-dev, it will create or add to the devDependencies object, in the same manner as it did with dependencies and --save. 

Why is this important?

The dependencies object makes it possible to share code in an elegant and efficient manner. npm plays a pivotal role in keeping track of dependencies and version used. When you push and share code in a team setting via git, you’re only making the code created by your team available. 

This saves you download and upload time, and coordinating between manual updates. To install and instantiate a working project on your local machine, you only need to pull the code and run npm install. 

The package manager will use the meta-data inside package.json and figure out the rest for you.

npm, however, is not the only package manager available. In 2016, Facebook announced the release of Yarn, a package management client that runs of the npm registry.

The npm registry is a free and public registry for JavaScript modules. Since then, Yarn has become another major and widely used package manager. Yarn is backward compatible and follows the conventions set by npm for the package.json file. 

This means you don’t have to worry if the dependencies object is called something else. 

What about putting your node modules in a different folder?

There are times where you may not want the modules to download into the node_module folder. Whatever the reason, there is no way to change it in npm as it is part of node.js’ core module loading system. If you were to change it globally, it may cause your packages to break.

However, yarn gives you the option to configure it. To do this, run the following command:

yarn install --modules-folder <path>

The package manager will do the heavy lifting required to make everything work smoothly. Alternatively, if you don’t want to keep specifying the path every time, you can create a file called .yarnrc with the following as a configuration.

# ./.yarnrc 

--modules-folder lib

When you run yarn install, it will create a lib folder and install packages to it instead of node_modules.

Conclusion

Modules are foundational to building robust and reusable code.

Most major frameworks have a command-line interface that you can install via npm to scaffold out a barebone application such as the Angular CLI and Vue CLI. These generators will automatically create a package.json for you with the required dependencies to make things run smoothly.

For this reason, a lot of new developers tend to miss out on learning the importance of package.json and how it functions. Generators often take away the complexity of setting up and make the task of app development faster and more robust by generating scaffold code that’s modeled on an accepted standard.

package.json is a simple file that has the potential to turn complex as it grows. The dependencies object is only a small portion of what it can do and covers the scope of this article. 

In theory, you can manually add each dependency yourself but using a package manager such as npm and yarn just makes your development flow a lot faster and easier. It also cuts down the potential for mistakes and errors.