. We're able to pull in other people's code; combining and stacking different packages together to fulfill 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 we can continue to build the projects we want. A development pipeline can have multiple kinds of code dependencies:

 file that holds metadata about our project. 

 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 

{
    "dependencies": {
        ...
    },
    "devDependencies": {
        ...
    },
    "peerDependencies": {
        ...
    }
}

Depending on the instance where code will be used changes the type of dependency a package is. There are packages that our users will need to run our code. A user is someone not directly working in our code-base. This could mean a person interacting with an application we wrote, or a developer writing a completely separate library. In other words, this is a production environment. Alternatively, there are packages that a developer or system only needs while working in our code. For example linters, testing frameworks, build tools, etc. Packages that a user won't need, but a developer or build system will need.

Dependencies are packages our project uses in 

. These get included with our code and are vital for making our application run. Whenever we install a dependency the package and any of its dependencies get downloaded onto our local hard drive. The more dependencies we add, the bigger our production code becomes. This is because each new dependency gets included in the production build of our code. Evaluate adding new dependencies unless they're needed!

Examples of dependencies: React, stylized-components, jQuery

, 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 

Examples of Dev Dependencies: Jest, ESLint, Webpack

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 

 directory on your local hard drive. Why is that? Well, peer dependencies are dependencies that are needed in 

, 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 

. If every React library included a version of React as a dependency, then in 

 our users would download React multiple times. Peer dependencies are a tool for library owners to optimize their project size.

Examples of Peer Dependencies: React, Bootstrap

I recently released a course, Creating React Libraries from Scratch, where we walk through content just like how NPM dependencies work, and a lot more! We start with an empty project and end the course with a fully managed library on npm. To learn more click the link below!

Click to view Creating React Libraries from Scratch!

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">NPM: What are project dependencies?</h1><p>Code dependencies are like <a href="https://www.lego.com/en-us" rel="noopener noreferrer nofollow">Lego's</a>. We're able to pull in other people's code; combining and stacking different packages together to fulfill 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 we can continue to build the projects we want. A development pipeline can have multiple kinds of code dependencies:</p><ol><li><p>dependencies</p></li><li><p>developer dependencies <em>(devDependencies)</em></p></li><li><p>peer dependencies <em>(peerDependencies)</em></p></li></ol><p>In JavaScript, we have a <code>package.json</code> file that holds metadata about our project. <code>package.json</code> 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 <code>package.json</code> file.</p><textarea data-iscodemirror="true" data-mode="application/json" data-uniqueid="cm--GzVoljlA_JypUKquVBWA" id="cm--GzVoljlA_JypUKquVBWA">{
    "dependencies": {
        ...
    },
    "devDependencies": {
        ...
    },
    "peerDependencies": {
        ...
    }
}</textarea><h2 class="heading-anchor-text" id="production-vs-development"><span>Production vs. Development</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#production-vs-development">#</a></h2><p>Depending on the instance where code will be used changes the type of dependency a package is. There are packages that our users will need to run our code. A user is someone not directly working in our code-base. This could mean a person interacting with an application we wrote, or a developer writing a completely separate library. In other words, this is a production environment. Alternatively, there are packages that a developer or system only needs while working in our code. For example linters, testing frameworks, build tools, etc. Packages that a user won't need, but a developer or build system will need.</p><h2 class="heading-anchor-text" id="dependencies"><span>Dependencies</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#dependencies">#</a></h2><p>Dependencies are packages our project uses in <em>production</em>. These get included with our code and are vital for making our application run. Whenever we install a dependency the package and any of its dependencies get downloaded onto our local hard drive. The more dependencies we add, the bigger our production code becomes. This is because each new dependency gets included in the production build of our code. Evaluate adding new dependencies unless they're needed!</p><p>Dependencies are installed using <code>npm install X</code> or <code>yarn add X</code></p><blockquote data-block-type="information" class="information annotated"><p><em>Examples of dependencies: React, stylized-components, jQuery</em></p></blockquote><h2 class="heading-anchor-text" id="dev-dependencies"><span>Dev Dependencies</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#dev-dependencies">#</a></h2><p>Packages needed in <em>development</em>, 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 <code>yarn</code> or <code>npm install</code> completion time.</p><p>Dev Dependencies are installed using <code>npm install --save-dev X</code> or <code>yarn add --dev X</code></p><blockquote data-block-type="information" class="information annotated"><p><em>Examples of Dev Dependencies: Jest, ESLint, Webpack</em></p></blockquote><h2 class="heading-anchor-text" id="peer-dependencies"><span>Peer Dependencies</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#peer-dependencies">#</a></h2><p>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 <code>node_modules/</code> directory on your local hard drive. Why is that? Well, peer dependencies are dependencies that are needed in <em>production</em>, 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 <em>production</em>. If every React library included a version of React as a dependency, then in <em>production</em> our users would download React multiple times. Peer dependencies are a tool for library owners to optimize their project size.</p><p>Peer Dependencies are installed using <code>yarn add --peer X</code></p><blockquote data-block-type="information" class="information annotated"><p><em>Examples of Peer Dependencies: React, Bootstrap</em></p></blockquote><h2 class="heading-anchor-text" id="end"><span>End</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#end">#</a></h2><p>I recently released a course, Creating React Libraries from Scratch, where we walk through content just like how NPM dependencies work, and a lot more! We start with an empty project and end the course with a fully managed library on npm. To learn more click the link below!</p><p><a href="https://www.newline.co/courses/creating-react-libraries-from-scratch" rel="noopener noreferrer nofollow">Click to view Creating React Libraries from Scratch!</a></p><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

NPM: What are project dependencies?

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript