@habrdima

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

Разбираюсь с 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 я смогу быстро подгружать для сайта нужные фреймворки, библиотеки и работать с ними, это возможно?
  • Вопрос задан
  • 243 просмотра
Пригласить эксперта
Ответы на вопрос 6
GreyCrew
@GreyCrew
Full-stack developer
Это потому, что require() не существует в JavaScript на стороне браузера / клиента.
Как решить проблему:
1) requirejs
2) Импортируйте, используя <script> тег
3) Собирайте проект сборщиком, типа webpack
Ответ написан
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Вам ни к чему npm/node, если вы хотите работать с jquery.
Npm нужен для разработки сложных фронт/бэк проектов на js/nodejs. А вам идти в learn.javascript.ru ну и по старинке работать с jquery
Ответ написан
mergenich
@mergenich
Нужно сначала собрать проект, для этого нужен сборщик

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

npm install -g parcel-bundler

и

parcel index.html

в папке с index.html
Ответ написан
zoonman
@zoonman
CEO @ LinuxQuestions.ru
У меня впечатление того, что вы не совсем понимаете, что такое 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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы