Installing packages (dependencies vs devDependencies) in Node.js - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding dependencies vs devDependencies

Which statement correctly describes the difference between dependencies and devDependencies in a Node.js project?

A dependencies are required for the app to run in production, devDependencies are only needed during development

B devDependencies are installed globally, dependencies are installed locally

C dependencies and devDependencies are the same and can be used interchangeably

D dependencies are needed only during development, devDependencies are needed in production

💡 Hint

Think about which packages your app needs when it runs versus when you write or test it.

Dependencies are packages your app needs to run in production. DevDependencies are only needed during development, like testing or building tools.

❓ component_behavior

intermediate

Effect of installing a package with --save-dev

What happens when you run npm install eslint --save-dev in your project?

A eslint is installed globally and not added to package.json

B eslint is added to dependencies and installed

C eslint is added to devDependencies and installed

D eslint is added to dependencies but not installed

💡 Hint

Consider where the package is listed in package.json after this command.

The --save-dev flag adds the package to devDependencies and installs it locally.

📝 Syntax

advanced

Identifying correct package.json entry for dependencies

Given this snippet from package.json, which option correctly shows how a dependency should appear?

Node.js

{
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "jest": "^29.5.0"
  }
}

A "express": "^4.18.2"

B "express": "4.18.2"

C "express": "~4.18.2"

D "express": "*"

💡 Hint

Look for the caret symbol and what it means for versioning.

The caret (^) means compatible with version 4.18.2, allowing minor updates but not major ones.

❓ state_output

advanced

Result of running npm install without package-lock.json

If your project has a package.json with dependencies and devDependencies but no package-lock.json, what will happen when you run npm install?

A No packages are installed because package-lock.json is missing

B Only dependencies are installed, devDependencies are ignored

C Only devDependencies are installed, dependencies are ignored

D Both dependencies and devDependencies are installed locally

💡 Hint

Think about what npm does by default when installing packages.

By default, npm install installs both dependencies and devDependencies locally, even if package-lock.json is missing.

🔧 Debug

expert

Why does a package installed as devDependency fail in production?

You installed a package with npm install --save-dev some-package. Your app crashes in production saying the package is missing. Why?

A The package was installed globally and not included in the project

B devDependencies are not installed when running <code>npm install --production</code> in production

C The package version is incompatible with production Node.js version

D The package.json file is corrupted and missing the package entry

💡 Hint

Consider what happens when you install packages in production mode.

When running npm install --production, npm skips installing devDependencies, so the package is missing in production.

Practice

1. Which command installs a package as a regular dependency needed to run your Node.js app?

easy

A. npm uninstall express

B. npm install --save-dev express

C. npm install express

D. npm update express

Solution

1. Step 1: Understand the difference between dependencies and devDependencies

   Dependencies are packages needed when your app runs, while devDependencies are only needed during development.

2. Step 2: Identify the correct npm command for dependencies

   The command npm install express installs the package as a regular dependency by default.

3. Final Answer:

   npm install express -> Option C

4. Quick Check:

   Regular dependencies use npm install without flags [OK]

Hint: Use plain npm install for runtime dependencies [OK]

Common Mistakes:

• Using --save-dev for packages needed at runtime
• Confusing uninstall with install commands
• Assuming npm update installs packages

2. Which of the following commands correctly installs a package as a development dependency?

easy

A. npm install lodash

B. npm install --save-dev jest

C. npm install --prod jest

D. npm install --global jest

Solution

1. Step 1: Recognize the flag for devDependencies

   The flag --save-dev tells npm to install the package as a development dependency.

2. Step 2: Match the command with the correct flag

   npm install --save-dev jest installs Jest as a devDependency, which is used for testing during development.

3. Final Answer:

   npm install --save-dev jest -> Option B

4. Quick Check:

   Dev dependencies use --save-dev flag [OK]

Hint: Use --save-dev flag for development-only packages [OK]

Common Mistakes:

• Omitting --save-dev for dev dependencies
• Using --prod which is not a valid flag for devDependencies
• Installing globally instead of locally

3. Given the following package.json snippet, which package will NOT be installed when running npm install --production?

{
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "mocha": "^10.2.0"
  }
}

medium

A. mocha

B. express

C. both express and mocha

D. neither express nor mocha

Solution

1. Step 1: Understand the effect of --production flag

   The --production flag tells npm to install only the packages listed under dependencies, skipping devDependencies.

2. Step 2: Identify which packages are devDependencies

   Here, mocha is under devDependencies, so it will NOT be installed with npm install --production.

3. Final Answer:

   mocha -> Option A

4. Quick Check:

   DevDependencies skipped with --production flag [OK]

Hint: npm install --production skips devDependencies [OK]

Common Mistakes:

• Assuming all packages install regardless of flags
• Confusing dependencies with devDependencies
• Thinking --production installs devDependencies

4. You run npm install --save-dev eslint but later realize you need eslint as a regular dependency. What is the best way to fix this?

medium

A. Run npm install eslint to add it as a dependency

B. Run npm install --save-prod eslint

C. Manually edit package.json to move eslint from devDependencies to dependencies

D. Run npm uninstall eslint then npm install eslint

Solution

1. Step 1: Understand npm behavior with existing packages

   Running npm install eslint alone will not move it from devDependencies to dependencies if already installed as devDependency.

2. Step 2: Properly remove and reinstall as dependency

   Uninstalling first removes it from devDependencies, then reinstalling adds it to dependencies.

3. Final Answer:

   Run npm uninstall eslint then npm install eslint -> Option D

4. Quick Check:

   Uninstall then install moves package between dependency types [OK]

Hint: Uninstall then reinstall to change dependency type [OK]

Common Mistakes:

• Trying to install without uninstalling first
• Editing package.json manually without reinstalling
• Using non-existent --save-prod flag

5. You want to install webpack and babel packages. webpack is needed to run your app, but babel is only needed during development. Which commands correctly install them with proper dependency types?

hard

A. npm install webpack && npm install --save-dev babel

B. npm install webpack && npm install babel

C. npm install --save-dev webpack && npm install babel

D. npm install --save-dev webpack babel

Solution

1. Step 1: Identify runtime vs development packages

   Webpack is needed at runtime, so it should be a regular dependency. Babel is only for development, so it should be a devDependency.

2. Step 2: Use correct npm commands for each

   Use npm install webpack for runtime dependency and npm install --save-dev babel for development dependency.

3. Final Answer:

   npm install webpack && npm install --save-dev babel -> Option A

4. Quick Check:

   Runtime = npm install, Dev = npm install --save-dev [OK]

Hint: Install runtime normally, dev tools with --save-dev [OK]

Common Mistakes:

• Installing all packages as devDependencies
• Installing dev tools as regular dependencies
• Using --save-dev for runtime packages