How can "npm install <module>" be used to develop pages intended for browsers?

Question

When adding a resource to a page running in a browser I either link to the file (locally, served by the web server, or on a CDN)

<link rel="stylesheet" href="https://somecdn.com/mycssresource.min.css">
<script src="alocalscript.js"></script>

or use webpack which ultimately bundles npm installed modules into one bundle.js , served by my web server.

When reading documentations of frameworks I often see (recently in Bulma ) the recommended way to install the framework as

npm install <framework>

I understand the usage for Node.js programs (where everything runs locally on the server, so the sources of the framework have their place there) but for browser-based dev, the files installed by npm install which reside in node_modules must ultimately make their way to the browser where the code actually runs.

Is the recommendation (or first choice) to install a framework via npm install applicable for code intended for browsers, or is it only for Node.js or webpack (or similar bundlers) usage?

Answer 1

Personally I prefer to install via npm install and then use a relative URL like /node_modules/.../filename.css for example.

I also know some people prefer to copy the css/js of the package and serve them from their own directory like /assets/css/... or /assets/js/.. . This way they can edit/add to the original framework if they wanted and keep the changes since they commit them in git.

Another very popular option is CDN, and many people recommend that for a big advantage of caching, especially if the user had already downloaded that file because it was used in another website they visited, it will be faster for them to load your app/website since they have those files cached locally in their browser and don't have to re-download.