What to do with NPM modules for the Site?

Question

JavaScript

I understand with NPM.
1) I installed Node.js on my computer
2) I downloaded jquery to the project folder via cmd, installed it in node_modules, everything is as indicated
3) I created app.js with the code

var $ = require("jquery");
console.log($);

4) I run node app.js in cmd, everything works.
but when I create index.html and connect app.js to it, I run it, the console shows me

Uncaught ReferenceError: require is not defined

In general, I can not understand what should I do with this NPM? how to work with it to create a website?
If you include a file from the node_modules folder in index.html, then of course it works, but I think this is not the right approach.
Also, npm install installs a bunch of files that are not needed for the site when downloading the same jq, what should I do in this case?
I was hoping that with NPM I would be able to quickly load the necessary frameworks, libraries for the site and work with them, is this possible?

Answer 1

This is because require() doesn't exist in JavaScript on the browser/client side.
How to solve the problem:
1) requirejs
2) Import using the tag 3) Build the project with a bundler like webpack<script>

Answer 2

Build a project

Answer 3

You don't need npm/node if you want to work with jquery.
Npm is needed to develop complex front / back projects on js / nodejs. And you go to learn.javascript.ru and work with jquery the old fashioned way

Answer 4

https://learn.javascript.ru/ajax-nodejs

Answer 5

First you need to build the project, for this you need a builder
Try Parcel ( https://parceljs.org)
npm install -g parcel-bundler
and
parcel index.html
in the folder with index.html

Answer 6

I get the impression that you don't quite understand what NPM and Node.js are.
First you need to understand the concepts of client and server. The client is the browser, the server is where the client gets the resources from. Resources are html, css, js (created to be executed on the client).
Node.js is an implementation of the Javascript engine (the one in the browser), but using it on the server side.
Javascript is just a programming language, but the code written in it can be run in different environments i.e. server side (node) or client side (browser). This code is very similar but has some differences.
npm is a package manager, its task is simply to download an archive with code and unpack it into node_modules.
When you run app.js, you start a Node process that interprets the app.js file and executes the instructions written in it. In your case, these instructions say - start the server and start listening on port 80, give the desired content on request. Those. app.js file is written to be interpreted by the Node engine, not the browser engine.
When you include app.js inside a page, the browser engine doesn't understand what to do with this file, because it lacks server engine support. That's why you see the error.
By default, npm packages are made to work with the Node.js engine. In order for their contents to be used correctly on the client side, various tricks were invented - collectors. Their task is to adapt Node.js code to run on the client side. Along the way, they do a lot of other things, for example, various kinds of optimizations, etc.
In your case, you need to use the most popular bundlers - webpack is a good place to start.
npm is a great tool for quickly installing dependencies, libraries, etc. But they need to learn how to use it. There is also nvm - Node.js version control, also needed.
I will give you advice - look at https://learn.javascript.ru/screencast/nodejsand understand what is being done and in what context. You will also find explanations about npm there.
I advise you to go to https://ru.hexlet.io/courses/js-setup-environment (it's free).
And this is the end https://learn.javascript.ru/screencast/webpack
Take your time, you need basic knowledge, spend another week analyzing technologies and there will be no stupid questions.