Что делать с модулями NPM для Сайта?

Question

[habrdima]

Разбираюсь с NPM.
1)Установил Node.js на свой компьютер
2)Через cmd скачал в папку проекта jquery, установилась в node_modules, все как указано
3)Создал app.js с кодом

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

4)В cmd запускаю node app.js, все работает.
но когда создаю index.html и подключаю в него app.js, запускаю, то консоль мне показывает

Uncaught ReferenceError: require is not defined

В общем не могу понять что мне делать с этим NPM? как работать с ним для создания сайта?
Если подключить файл с папки node_modules в index.html то конечно работает, но я думаю это не правильный подход.
Eще npm install устанавливает кучу не нужных для сайта файлов при скачивании того же jq, что делать в этом случае?
Я надеялся что с NPM я смогу быстро подгружать для сайта нужные фреймворки, библиотеки и работать с ними, это возможно?

Comments

[Михаил]

нужна сборка js (webpack и ему подобные),

Answer 1

[Сергей Сунцев]

Это потому, что require() не существует в JavaScript на стороне браузера / клиента.
Как решить проблему:
1) requirejs
2) Импортируйте, используя <script> тег
3) Собирайте проект сборщиком, типа webpack

Answer 2

[Владислав Лысков]

Сбилдить проект

Answer 3

[Шохрух Шаймардонов]

Вам ни к чему npm/node, если вы хотите работать с jquery.
Npm нужен для разработки сложных фронт/бэк проектов на js/nodejs. А вам идти в learn.javascript.ru ну и по старинке работать с jquery

Comments

[Антон Шаманов]

сразу видно что эксперт - обосрал и ничего по существу

[Шохрух Шаймардонов]

Антон Шаманов, ну я намек дал, на то что надо заново изучить азы. Или мне урок провести?!

[Антон Шаманов]

Шохрух Шаймардонов, у нас тут что форт боярд?

[Шохрух Шаймардонов]

Антон Шаманов, к сожалению не знаком с данным термином)

Answer 4

[Антон Шаманов]

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

Answer 5

[mergenich]

Нужно сначала собрать проект, для этого нужен сборщик

Попробуй Parcel (https://parceljs.org)

npm install -g parcel-bundler

и

parcel index.html

в папке с index.html

Answer 6

[Philipp]

У меня впечатление того, что вы не совсем понимаете, что такое NPM и Node.js.

Для начала нужно разобраться с понятиями клиента и сервера. Клиент - это браузер, сервер - то, откуда клиент получает ресурсы. Ресурсы - это html, css, js (созданный для выполнения на клиенте).

Node.js - это реализация движка Javascript (того самого, который в бразуере), но с применением его на стороне сервера.

Javascript - это просто язык программирования, но код, написанный на нем, может выполняться в разных средах, т.е. на стороне сервера (node) или на стороне клиента (браузер). Этот код очень похож, но имеет некоторые отличия.

npm - это пакетный менеджер, упрощенно его задача скачивать архив с кодом и распаковывать в node_modules.

Когда вы запускаете app.js, то вы запускаете процесс Node, который интерпретирует файл app.js и выполняет инструкции написанные в нем. В вашем случае эти инструкции говорят - запусти сервер и начни слушать порт 80, отдай нужный контент по запросу. Т.е. app.js файл написан для того, чтобы быть интерпретирован движком Node, а не движком браузера.
Когда вы подключаете app.js внутрь страницы, то движок браузера не понимает, что делать с этим файлом, т.к. в нем отсутствует поддержка серверного движка. Поэтому вы и видите ошибку.

По умолчанию npm пакеты сделаны для работы с Node.js движком. Для того, чтобы их содержимое можно было правильно использовать на стороне клиента, придумали различные ухищрения - сборщики. Их задача адаптировать Node.js код для выполнения на стороне клиента. Попутно они делают еще много чего, например разного рода оптимизации и т.д.
В вашем случае нужно использовать наиболее популярные сборщики - webpack подойдет для старта.

npm - отличный инструмент для быстрой установки зависимостей, библиотек и т.д. Но им нужно научиться пользоваться. Есть еще nvm - управление версиями Node.js, тоже надо.

Дам вам совет - посмотрите https://learn.javascript.ru/screencast/nodejs и разберитесь, что и в каком контексте выполняется. Там же вы найдете пояснения по поводу npm.
Советую пройти https://ru.hexlet.io/courses/js-setup-environment (это бесплатно).
И это под конец https://learn.javascript.ru/screencast/webpack

Не торопитесь, вам необходимы базовые знания, потратьте недельку другую на разбор технологий и не будет возникать глупых вопросов.