H
H
habrdima2020-03-13 18:27:03
JavaScript
habrdima, 2020-03-13 18:27:03

What to do with NPM modules for the Site?

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 the question

In order to leave comments, you need to log in

6 answer(s)
S
Sergey Suntsev, 2020-03-13
@GreyCrew

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>

V
Vladislav Lyskov, 2020-03-13
@Vlatqa

Build a project

S
Shohruh Shaimardonov, 2020-03-13
@joeberetta

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

A
Anton Shamanov, 2020-03-13
@SilenceOfWinter

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

M
mergenich, 2020-03-13
@mergenich

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

P
Philipp, 2020-03-14
@zoonman

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question