[Quiz] Dependencies Vs devDependencies

[Quiz] Dependencies Vs devDependencies

The difference between Dependencies and devDependencies is simple, many of us already know it, and still most devDependencies sections inside a package.json are empty. 🤷‍♂

In a CI/CD workflow, this directly affects execution time and consequently infrastructure cost. Additionally, more dependencies lead to bigger bundles and increased security risks.

Quiz

Before explaining the difference let me test your knowledge.

For each of the following packages, decide whether it should be categorized as a **dependency** 🌐 (needed for running the application in production) or a **devDependency** 🔧 (only needed during development).

1. react
2. eslint
3. webpack
4. express
5. jest
6. axios
7. typescript
8. lodash
9. vite
10. babel
11. vue
12. prettier

Answers available at the end of this article.

Picking the Right Category

To decide whether a package should be a dependencyor devDependency we need to understand its role in the application.

Dependencies are needed to run the application in production. 
Some examples include:

• Frameworks and libraries, like React, Vue, Angular, or Express.
• Utility libraries that your code depends on, such as Lodash or Moment.js.
• Database drivers if your application interacts directly with databases.

DevDependencies are needed during the development phase, but not when running the application in production. 
They typically include:

• Code linting tools, like ESLint or TSLint.
• Testing frameworks and libraries, such as Cypress, Jest, Mocha, or Chai.
• Build tools and task runners, like Webpack or Vite.
• Transpilers like Babel or TypeScript, if the compiled code is what runs in production.
• Documentation generation tools.

So the general rule is, that if your application code is not importing a file it should not be in your dependencies.

DevDependencies are installed using the -D flag in all of the popular package managers.

\# npm
npm install -D eslint

\# yarn
yarn add -D eslint

\# pnpm
pnpm add -D eslint

Quiz Answer

1. react - 🌐 Dependency 🌐
2. eslint - 🔧 DevDependency 🔧
3. webpack - 🔧 DevDependency 🔧
4. express - 🌐 Dependency 🌐
5. jest - 🔧 DevDependency 🔧
6. axios - 🌐 Dependency 🌐
7. typescript - 🔧 DevDependency 🔧
8. lodash - 🌐 Dependency 🌐
9. vite - 🔧 DevDependency 🔧
10. babel - 🔧 DevDependency 🔧
11. vue - 🌐 Dependency 🌐
12. prettier - 🔧 DevDependency 🔧

Did you get them all correct? 
If not, your homework is to update your package.json first thing in the morning. 🌞