Official docs say it’s for
Packages that are only needed for local development and testing.
Umm, okay. Not 100% clear there. Some articles mention things like ESLint or Jest (k, I’m onboard there) but others mention Babel or WebPack. I get that you don’t need WebPack libraries to be loaded in the browser but how the hell do you bundle up your code without it? When you use npm ci or npm install you’ll get all dependencies but isn’t it good practice (in a CICD environment) to use --omit=dev or --only=prod?
I think it makes more sense if you think about backend applications: If you write a Webserver with ExpressJS in typescript, you need typescript only to compile it (dev dependency) but once compiled, you only need ExpressJS in your node_modules for the app to be able to run (“regular” dependency).
Frontend development is a bit strange in that respect, because often everything gets bundled into your dist/ directory, so technically there are no runtime dependencies? In that case it’s more of a hint to let you know “this goes into the bundle” vs. “this is part of the compiler toolchain”
It should be what you need to run it in production, so most frontends really only should declare dev dependencies.
Take jQuery for example: all dev dependencies. They ship a bundle, so all of the libraries and tooling they use, you don’t care.
If your frontend ever becomes a dependency of a bigger thing, or gets imported by the server as a dependency for your UI, you also don’t need to download all of your runtime dependencies you bundled together, you really only need the bundle.
For frontend I use the dev dependencies for testing tools. Ex. Cypress. That way my build pipeline doesn’t need to download a bunch of things that won’t be used.