𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗪𝗵𝗲𝗻 𝗬𝗼𝘂 𝗥𝘂𝗻 𝗡𝗽𝗺 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀?

You hit Enter on an npm command and wait. Suddenly, your project works. It feels like magic.

It is not magic. It is a series of network requests, code parsing, and file optimizations.

Stop running commands blindly. Understand the engine behind these 6 core commands.

  1. npm install This command reads your package.json. It contacts a cloud registry to find your dependencies. • It downloads packages into the node_modules folder. • It resolves version conflicts. • It creates a package-lock.json to record exact versions.

  2. npm run format:check This is a verification step. It uses tools like Prettier to scan your files. • It builds a virtual layout of your code. • It compares your code against your style rules. • It flags errors without changing your files.

  3. npm run format This command fixes the issues found during the check. • It runs Prettier on your project. • It rewrites your files to match your style rules. • It cleans up spacing and formatting automatically.

  4. npm run lint Think of this as a spellchecker for your code. ESLint scans for errors like: • Syntax mistakes. • Unused variables. • Missing imports. • Incorrect React Hook usage.

  5. npm run build This command prepares your app for the real world. It creates a dist folder. • It performs tree shaking to remove unused code. • It minifies code by stripping whitespace and shortening variable names. • It bundles JavaScript, CSS, and assets into optimized files. • These files are ready for deployment to a server.

  6. npm run dev This starts a local server for you to work on. • It uses Native ES Modules to compile files only when your browser asks for them. • It uses Hot Module Replacement (HMR) to update your site instantly without a page refresh.

  7. npm run preview This is your final check. It ignores your source code and only looks at the dist folder. • It simulates how your app will act on a real server. • It helps you catch bugs before you deploy to production.

The terminal is not a black box. Understanding these tools helps you debug faster when things break.

What command changed how you code once you learned how it works? Tell me below.

Source: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba