Code dependencies are like Lego’s. We are able to pull in other people’s code, combining and stacking different packages together to achieve our goals. Using dependencies greatly reduces the complexity of developing software. We can take advantage of the hard work someone has already done to solve a problem so that we can continue building the projects we want. A development pipeline can have multiple kinds of code dependencies:
- dependencies
- developer dependencies (devDependencies)
- peer dependencies (peerDependencies)
In JavaScript, we have a package.json file that holds metadata about our project. package.json can store things like our project name, the version of our project, and any dependencies our project has. Dependencies, devDependencies, and peerDependencies are properties that can be included in a package.json file.
{
"dependencies": {
...
},
"devDependencies": {
...
},
"peerDependencies": {
...
}
}
Production vs. Development
The type of dependency a package is changes depending on the instance where code will be used. Some packages are necessary for users to run our code. By “users”, we refer to people who are not directly working in our code-base, such as those who interact with an application we wrote or a developer writing a separate library. In other words, these are packages that are required in a production environment. On the other hand, there are packages that are only needed by developers or systems while working in our code, such as linters, testing frameworks, and build tools. These are packages that users won’t need, but developers or build systems will need.
Dependencies
Dependencies refer to packages that our project uses in production. They are essential for making our application run, as they are included with our code. Whenever we install a dependency, the package and any of its dependencies are downloaded onto our local hard drive. The more dependencies we add, the larger our production code becomes, since each new dependency is included in the production build of our code. It’s important to evaluate whether new dependencies are truly needed before adding them, in order to minimize the size of our production code.
Dependencies are installed using npm install X or yarn add X
Examples of dependencies: React, stylized-components, jQuery
Dev Dependencies
Packages needed in development, or while developing our code, are considered dev dependencies. These are programs, libraries, and tools that assist in our development workflow. Dev dependencies also get downloaded to your local hard drive when installed, but the user will never see these dependencies. So adding a lot of dev dependencies only affects the initial yarn or npm install completion time.
Dev Dependencies are installed using npm install --save-dev X or yarn add --dev X
Examples of Dev Dependencies: Jest, ESLint, Webpack
Peer Dependencies
Peer dependencies are similar to dependencies except for a few key features. First, when installing a peer dependency it doesn’t get added to your node_modules/ directory on your local hard drive. Why is that? Well, peer dependencies are dependencies that are needed in production, but we expect the user of our code to provide the package. The package doesn’t get included in our code. This is to reduce including multiples of the same dependency in production. If every React library included a version of React as a dependency, then in production our users would download React multiple times. Peer dependencies are a tool for library owners to optimize their project size.
Peer Dependencies are installed using yarn add --peer X
Examples of Peer Dependencies: React, Bootstrap
End
I recently released a course, Creating React Libraries from Scratch, where we walk through deploying a React library from yarn init to yarn publish. Creating React Libraries from Scratch includes content just like this and more!
To learn more click the image below!
