JavaScript Tooling

npm & Yarn

Package managers for JavaScript projects

Find videos you like?

Save to resource drawer for future reference!

What are npm & Yarn?

npm (Node Package Manager) and Yarn are package managers that help you install, manage, and share JavaScript libraries. They handle dependencies, versioning, and make it easy to use thousands of open-source packages in your projects.

Install Packages

One command to add libraries to your project

Manage Dependencies

Track versions and update packages easily

Share Code

Publish your own packages to npm registry

npm vs Yarn

Comparing the two popular package managers

npm

•Comes with Node.js (built-in)
•Largest package registry
•Standard for most projects
•Uses package-lock.json

Yarn

•Faster parallel installation
•Better offline mode
•Workspaces support (monorepos)
•Uses yarn.lock

Both are Great!

Both npm and Yarn are excellent choices. npm is more common and comes pre-installed. Yarn is faster for large projects. Pick what your team prefers!

Common Commands

Essential commands for both package managers

npm

npm init

Create new project

Yarn

yarn init

Create new project

npm install package-name

Install a package

yarn add package-name

Install a package

npm install --save-dev package

Install dev dependency

yarn add --dev package

Install dev dependency

npm uninstall package-name

Remove a package

yarn remove package-name

Remove a package

npm update

Update all packages

yarn upgrade

Update all packages

Example 1: Installing Packages

How to add libraries to your project

# Create a new project
npm init -y

# Install React (production dependency)
npm install react react-dom

# Install Webpack (development dependency)
npm install --save-dev webpack webpack-cli

# Install globally (available everywhere)
npm install -g create-react-app

# Install specific version
npm install lodash@4.17.21

# Install from GitHub
npm install user/repo

# Check installed packages
npm list

# Check outdated packages
npm outdated

Example 2: Running Scripts

Execute commands defined in package.json

# package.json scripts section
{
  "scripts": {
    "start": "node server.js",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest",
    "lint": "eslint src/"
  }
}

# Run scripts with npm
npm start        # Runs "node server.js"
npm run dev      # Runs webpack dev server
npm run build    # Production build
npm test         # Run tests

# Run scripts with Yarn
yarn start
yarn dev
yarn build
yarn test

Tips & Best Practices

Make the most of package managers

✅ Do

• Commit lock files to version control
• Use exact versions for production
• Regularly update dependencies
• Check for security vulnerabilities
• Use scripts for common tasks
• Document required Node version
• Use .npmrc for configuration
• Clean install on CI/CD

❌ Don't

• Commit node_modules folder
• Mix npm and Yarn in same project
• Install everything globally
• Ignore security warnings
• Use outdated packages
• Modify lock files manually
• Skip version ranges understanding
• Install untrusted packages

Key Takeaways

📦

Package Managers

npm and Yarn manage dependencies
Make development easier

⚡

Simple Commands

npm install / yarn add
Install packages in seconds

🔒

Lock Files

Ensure consistent installs
Commit to version control

🚀

Scripts

Automate common tasks
Define in package.json

Essential Tool

Package managers are fundamental to modern JavaScript development. Master npm or Yarn to manage dependencies efficiently!

Previous Topic

CommonJS vs ES Modules

Understanding module systems: require() vs import/export.

Next Topic

package.json

Managing dependencies and scripts.

Ask a Question

Have a question about npm & Yarn? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Tooling

npm & Yarn

Package managers for JavaScript projects

Find videos you like?

Save to resource drawer for future reference!

What are npm & Yarn?

Install Packages

One command to add libraries to your project

Manage Dependencies

Track versions and update packages easily

Share Code

Publish your own packages to npm registry

npm vs Yarn

Comparing the two popular package managers

npm

•Comes with Node.js (built-in)
•Largest package registry
•Standard for most projects
•Uses package-lock.json

Yarn

•Faster parallel installation
•Better offline mode
•Workspaces support (monorepos)
•Uses yarn.lock

Both are Great!

Both npm and Yarn are excellent choices. npm is more common and comes pre-installed. Yarn is faster for large projects. Pick what your team prefers!

Common Commands

Essential commands for both package managers

npm

npm init

Create new project

Yarn

yarn init

Create new project

npm install package-name

Install a package

yarn add package-name

Install a package

npm install --save-dev package

Install dev dependency

yarn add --dev package

Install dev dependency

npm uninstall package-name

Remove a package

yarn remove package-name

Remove a package

npm update

Update all packages

yarn upgrade

Update all packages

Example 1: Installing Packages

How to add libraries to your project

# Create a new project
npm init -y

# Install React (production dependency)
npm install react react-dom

# Install Webpack (development dependency)
npm install --save-dev webpack webpack-cli

# Install globally (available everywhere)
npm install -g create-react-app

# Install specific version
npm install lodash@4.17.21

# Install from GitHub
npm install user/repo

# Check installed packages
npm list

# Check outdated packages
npm outdated

Example 2: Running Scripts

Execute commands defined in package.json

# package.json scripts section
{
  "scripts": {
    "start": "node server.js",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest",
    "lint": "eslint src/"
  }
}

# Run scripts with npm
npm start        # Runs "node server.js"
npm run dev      # Runs webpack dev server
npm run build    # Production build
npm test         # Run tests

# Run scripts with Yarn
yarn start
yarn dev
yarn build
yarn test

Tips & Best Practices

Make the most of package managers

✅ Do

• Commit lock files to version control
• Use exact versions for production
• Regularly update dependencies
• Check for security vulnerabilities
• Use scripts for common tasks
• Document required Node version
• Use .npmrc for configuration
• Clean install on CI/CD

❌ Don't

• Commit node_modules folder
• Mix npm and Yarn in same project
• Install everything globally
• Ignore security warnings
• Use outdated packages
• Modify lock files manually
• Skip version ranges understanding
• Install untrusted packages

Key Takeaways

📦

Package Managers

npm and Yarn manage dependencies
Make development easier

⚡

Simple Commands

npm install / yarn add
Install packages in seconds

🔒

Lock Files

Ensure consistent installs
Commit to version control

🚀

Scripts

Automate common tasks
Define in package.json

Essential Tool

Package managers are fundamental to modern JavaScript development. Master npm or Yarn to manage dependencies efficiently!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

CommonJS vs ES Modules

package.json

JavaScript Code Editor

Building Your Learning Module...

npm & Yarn

What are npm & Yarn?

Install Packages

Manage Dependencies

Share Code

npm

Yarn

Both are Great!

npm

Yarn

✅ Do

❌ Don't

Key Takeaways

Package Managers

Simple Commands

Lock Files

Scripts

Essential Tool

CommonJS vs ES Modules

package.json

JavaScript Code Editor

npm & Yarn

What are npm & Yarn?

Install Packages

Manage Dependencies

Share Code

npm

Yarn

Both are Great!

npm

Yarn

✅ Do

❌ Don't

Key Takeaways

Package Managers

Simple Commands

Lock Files

Scripts

Essential Tool