Package managers and dev tools are the software that developers use to organize code, automate repetitive work, and test their changes before a website goes live

When a developer builds a website, they rarely write everything from scratch. Instead, they use pre-built pieces of code called packages — small programs that handle common tasks like validating form input, resizing images, or connecting to a database. A package manager is the tool that finds these packages, downloads them, and keeps track of which versions your project is using. Without it, a developer would spend hours hunting for code online and manually managing updates.

Dev tools are separate programs that automate the boring parts of development — things like converting code into a format browsers understand, running tests to catch bugs, or bundling all the code files into one package to send to a server. Together, package managers and dev tools let developers work faster and make fewer mistakes. They are not visible to someone visiting a website, but they are essential to how the website gets built.

Key Takeaways

  • Package managers like npm and Yarn read and organize pre-built code packages that developers use to avoid writing everything from scratch.
  • Dev tools automate tasks like converting code formats, running tests, and bundling files so developers do not have to do these manually.
  • A package.json file (or similar) keeps a record of which packages a project uses and which versions, so the same code works on every developer's computer.
  • Popular package managers and tools vary by programming language — npm for JavaScript, pip for Python, Composer for PHP — but they all work the same way.
  • These tools run on a developer's own computer during the building process, not on the web server where the finished website lives.

How package managers work

A package manager is like an app store for code. A developer opens a command-line interface (a text-based window where they type commands) and types something like npm install bootstrap. The package manager then connects to a central repository — a massive online library of packages — downloads Bootstrap (a popular framework for styling websites), and saves it to the project folder on their computer.

The package manager also downloads anything that Bootstrap itself depends on. If Bootstrap needs a package called Popper.js to work correctly, the package manager fetches that too, automatically. This chain of dependencies can go several layers deep, but the package manager handles it without the developer having to think about it.

Once everything is downloaded, the package manager creates a file that records what was installed and which version. In JavaScript projects, this file is called package.json. If another developer clones the same project from a shared repository, they can type one command and their package manager will install the exact same versions of every package. This prevents the "it works on my computer" problem where code behaves differently depending on which versions each person has.

Common package managers by language

npm (Node Package Manager) is the most widely used package manager for JavaScript and Node.js projects. It comes built into Node.js, so developers who work with JavaScript usually have it already. npm hosts over a million packages and is the default choice for most web development teams.

Yarn is an alternative to npm that some teams prefer because it installs packages faster and offers slightly different features. It works the same way as npm — developers type commands like yarn add react — but it creates a different lock file to record versions. A project uses either npm or Yarn, not both.

Other languages have their own package managers. pip handles Python packages, Composer handles PHP packages, and Bundler handles Ruby packages. A developer working in multiple languages will use whichever package manager matches the language they are writing in.

What dev tools do during the build process

After a developer writes code and installs packages, dev tools take over to prepare that code for the web. One of the most common tasks is bundling — combining all the separate JavaScript files, CSS files, and images into a smaller number of files optimized for the web. A tool like Webpack or Vite does this automatically.

Another task is transpiling, which means converting modern JavaScript (or other languages) into older JavaScript that older browsers can understand. A tool like Babel does this so that code written using the latest features still works for people using older browsers.

Dev tools also run tests — automated checks that verify the code works the way the developer intended. A developer writes test code that checks whether a function returns the right answer, whether a button click triggers the right action, or whether the website loads in under a certain time. Tools like Jest or Mocha run these tests automatically, catching bugs before the code goes live.

The difference between development and production

When a developer is actively writing code, they often use a development server — a tool that runs on their own computer and shows them what the website looks like as they type. This server automatically refreshes the page whenever they save a file, so they see changes when ready. Popular development servers include the one built into Create React App or the one that comes with Next.js.

Once the code is ready, a different set of tools prepares it for production — the real web server where actual visitors will see the website. Production code is usually minified (unnecessary spaces and comments removed to make files smaller) and optimized for speed. The same package manager and dev tools that worked on the developer's computer do not run on the production server; instead, they produce a final bundle of files that the server straightforward serves to visitors.

Why developers use these tools instead of writing code manually

Without package managers, a developer would have to manually read each piece of code from its source, figure out which version works with which other version, and update everything by hand whenever a security fix came out. This would take hours for even a small project and would be error-prone.

Without dev tools, a developer would have to manually convert their code into a format browsers understand, run tests by hand (clicking buttons and checking results), and manually optimize file sizes. For a large project, this could take days. Dev tools do all of this in seconds, and they do it the same way every time, which means fewer mistakes.

These tools also let teams work together. When one developer updates a package to a newer version, the package.json file records that change. Other developers pull that change and run the package manager to get the same version. Without this system, different team members would end up with different code, and the website would behave differently depending on who deployed it.

How to recognize when a project uses package managers and dev tools

If you look at a web development project folder, you will see a package.json file (for JavaScript projects) or similar files for other languages. You will also see a folder called node_modules (for JavaScript) that contains all the downloaded packages. This folder is usually very large and is not shared with other developers — instead, each developer's computer generates it by running the package manager.

You will also see configuration files for dev tools, like webpack.config.js (for Webpack), babel.config.js (for Babel), or jest.config.js (for Jest). These files tell the tools how to behave — which files to bundle, which browsers to support, which tests to run.

When a developer wants to start working on a project, they typically run one command like npm install or yarn install, which reads the package.json file and downloads everything the project needs. Then they run another command like npm start or yarn start, which starts the development server and opens the website in their browser.

Frequently Asked Questions

Do visitors to a website see or read package managers and dev tools?

No. Package managers and dev tools run only on the developer's computer during the building process. The final website that gets sent to a visitor's browser contains only the optimized code that the tools produced. Visitors never interact with these tools directly.

What happens if a package has a security problem?

The package manager can check for known security issues and warn the developer. Most package managers have a command like npm audit that scans all installed packages and reports vulnerabilities. The developer can then update to a newer, safer version of the package using a command like npm update.

Can a developer use a website without package managers and dev tools?

Yes, but it is much slower and more error-prone. A developer could write all the code by hand, manually read libraries, and skip automated testing. Small projects sometimes do this. But for any project larger than a few pages, these tools save so much time and prevent so many bugs that most developers use them.

Why do different projects use different package managers?

Different programming languages have different package managers because each language has its own ecosystem and community. A JavaScript project uses npm or Yarn because that is where JavaScript packages live. A Python project uses pip because that is where Python packages are stored. You cannot use npm to install Python packages or pip to install JavaScript packages.

What is the difference between a package manager and a version control system?

A package manager (like npm) downloads external code that other people wrote and manages which versions your project uses. A version control system (like Git) tracks changes to your own code and lets multiple developers work on the same project without overwriting each other's work. Most projects use both — Git to manage the team's code, and a package manager to manage external dependencies.