Skip to main content

Command Palette

Search for a command to run...

NPM in a nutshell

Updated
6 min readView as Markdown
NPM in a nutshell
M

Learning web devlelopment

First, install node js from nodejs.org , just like you install a game.

Now, let's break down npm (Node Package Manager) and package.json in simpler terms:

npm and package.json Basics:

npm is a tool that helps you manage and install packages (libraries or tools) for your JavaScript projects. When you initialize a new project with npm init, it creates a package.json file. This file keeps track of important information about your project, like its name, version, dependencies (packages it needs to work), and more.

Installing Packages:

To install a package, you use npm install packageName. This command downloads the package and adds it to your project. If you just run npm install, npm installs all the packages listed in your package.json file.

Local vs Global Installation:

Packages can be installed locally or globally:

  • Local installation means the package can be used only within the current project folder. npm install packageName installs the package locally.

  • Global installation (npm install -g packageName) makes the package available globally across your system, so you can use it from any folder.

Versioning:

Packages have version numbers like 11.11.11, divided into major, minor, and patch versions:

  • Major updates include significant changes that might not be compatible with older versions.

  • Minor updates add new features but ensure compatibility with existing code.

  • Patch updates fix small issues without changing compatibility.

Version numbers ain't decimals. They can go super high. For example, 106.69.420

Semantic Versioning:

Semantic Versioning (semver) defines how version numbers are structured and incremented based on the changes introduced in software packages. Here’s how version numbers change during major, minor, and patch updates:

  1. Major Version: The first digit in a version number (X in X.Y.Z) is incremented when there are incompatible API changes or significant feature enhancements. For example, upgrading from 1.0.0 to 2.0.0 indicates major changes that may break compatibility with existing code.

  2. Minor Version: The second digit (Y in X.Y.Z) is incremented when backward-compatible features are added. Minor updates usually introduce new functionality without breaking existing APIs. For instance, upgrading from 1.2.3 to 1.3.0 represents a minor version change.

  3. Patch Version: The third digit (Z in X.Y.Z) is incremented for backward-compatible bug fixes or minor improvements. Patch updates typically do not introduce new features but address issues or bugs found in the current version. For example, upgrading from 1.2.3 to 1.2.4 indicates a patch update.

  • In short, when incrementing the version:

    • Major Version Increment: Resets the minor and patch versions to zero (X.0.0).

    • Minor Version Increment: Resets the patch version to zero (X.Y.0).

    • Patch Version Increment: Only increments the patch version (X.Y.Z+1).

This versioning scheme helps developers and users understand the nature of changes in a software release quickly. It also ensures that version numbers follow a predictable pattern, making it easier to manage dependencies and compatibility across projects.

Some more commands

  • Using symbols like ^ (npm install package@^1.2.3) allows npm to automatically install new minor versions but not major updates, maintaining compatibility.

  • npm install package@latest installs the latest version of a package, including major updates.

  • npm install package@5 installs version 5 specifically, including major updates.

  • npm install package@~2.2 installs the latest patch version (2.2.y) of the package without upgrading to a newer minor version within the 2.2 series.

  • npm update updates the packages specified in package.json file

npm helps you manage JavaScript packages efficiently. With package.json, you keep your project organized by listing all dependencies. Versioning ensures you can control when to adopt new features or bug fixes, either automatically or by specifying exact versions.

Package.json file supremacy

  • The package.json file lists project dependencies without including the actual package files, thus reducing storage usage on GitHub and making the cloning process faster.

  • When cloning a repo, you can install these dependencies locally using npm install, ensuring all required packages are available without storing them in the repository.

  • Inside a Node.js project, you'll often find a package.json file, which is crucial for managing the project's dependencies, scripts, and metadata.

  • This file lists all the packages (libraries) the project depends on.

  • When specifying package versions, two symbols, ^ and ~, are commonly used:

    • ^ allows updates to newer minor versions (e.g., ^1.2.3 will accept 1.3.0 but not 2.0.0).

    • ~ permits updates to newer patch versions (e.g., ~1.2.3 will accept 1.2.4 but not 1.3.0).

  • This helps ensure your project uses compatible versions of dependencies, maintaining stability and avoiding breaking changes.

But... What is package-lock.json file??

The package-lock.json file is automatically generated by npm when you use npm to install dependencies in your project. Its primary use is to provide a deterministic and consistent way to install dependencies for your project across different environments or by different team members. Here are its key uses:

  1. Dependency Version Locking: It locks down the exact versions of dependencies (and their sub-dependencies) that were installed when npm install was run. This ensures that subsequent installs on other machines or by other developers will use the same versions, thereby preventing unintentional upgrades to newer versions that could potentially cause compatibility issues.

  2. Reproducible Builds: By capturing the exact dependency versions in package-lock.json, your project's builds become reproducible. This means anyone who pulls your project and runs npm install will get the exact same dependencies, avoiding discrepancies due to potentially different default behaviors of npm's dependency resolution.

  3. Faster Installation: package-lock.json helps npm install dependencies more efficiently by reducing the need to resolve dependencies repeatedly. It acts as a cache of resolved dependency versions, speeding up subsequent installs.

In summary, package-lock.json ensures that your project dependencies are consistent, reproducible, and locked to specific versions, thereby improving reliability and reducing potential issues related to dependency management in npm-based projects.At the end of the day, All you have to do is just ignore that file. It will take of itself.

Bonus: It's better to specify the node_modules folder in your .gitignore file to avoid pushing it to GitHub. This reduces repository size, ensures consistency by allowing others to install exact dependencies with npm install, and speeds up the cloning process by not transferring the large node_modules folder. This keeps your repository clean and efficient.

By understanding these basics, you'll be able to use npm effectively in your projects and collaborate with the vast ecosystem of JavaScript libraries and tools available.

More information:

  • Use code npm list -g --depth=0 to know what packages are installed globally

  • npm outdated to check which packages in your project are outdated

  • When u use old format of npm in package-lock.json, and use new npm version to update/install, it will form bulnerabilities This happens especially when u clone a package-json file from git repo created long ago

    npm audit fix - fixes the vulnerabilities

    npm audit - checks for vulnarabilities

    If npm audit fix doesn't resolve the vulnerabilities, consider manually updating the affected packages and reinstalling your dependencies. Make sure to test your application after making these changes to ensure everything works correctly. If you continue to encounter issues, let me know, and we can troubleshoot further!

    Just update the package versions by yourself manually (or using chatgpt) and paste it in package.json, then run npm install for fresh formatted package-lock.json file.]