Как вы используете jQuery и прочие библиотеки JS, установленные через npm?

Question

[Александр]

Чтобы использовать скрипт, написанный на JavaScript, нужно подключить его в HTML-странице. NPM устанавливает пакеты в папку node_modules, на которую, как я думаю, явно не ссылаются из HTML-страницы. Что делают веб-разработчики в таких случаях?

Comments

[Модератор]

Переформулируйте вопрос так, чтобы на него можно было дать однозначный ответ. Для опросов и сбора мнений платформа не предназначена.

Answer 1

[Roman K]

Собирают исходники в бандл (bundle) системами сборки — webpack / gulp. На выходе получают один js файл (если не использовать code splitting), в котором есть все библиотеки, выполнен tree shaking (удалён мёртвый код), код минифицирован (чтобы меньше весить и быстрее передаваться пользователю) и доведён до целевой версии (babel, который позволяет писать разработчику код с новыми фичами (из ES6), переводя его в целевой (сейчас это чаще всего ES5))

Далее этот бандл автоматически или (реже) вручную внедряется в HTML.

То, про что говоришь ты — это примерно как в 2020 писать на скалах углём.

Comments

[Александр]

Собирают исходники в бандл (bundle) системами сборки — webpack / gulp

Я пока знаком с основами Gulp. Значит, пишут task, который возьмет код библиотеки из папки node_modules, обработает его каким-либо образом и результат сбросит в нужную папку, откуда потом уже можно будет подключить библиотеку к HTML-странице?

[Roman K]

Александр, я бы советовал сразу за webpack браться. Да, он страшный, комбайновый и сложный. Зато этот опыт будет исчерпывающим (после этого галп покажется смешным скриптиком), и в реальной разработке сейчас используют в основном именно webpack.

Отвечая на твой вопрос:
1. У тебя есть папка с кодом (где также лежит node_modules)
2. В ней должен быть файл-точка входа (какой-нибудь main.js или app.js)
3. Его нужно запихнуть на вход gulp
4. Применить нужное количество плагинов (окей гугл: "gulp plugins"). Это может быть babel, какой-нибудь uglify-js и, например, inject html
5. PROFIT

Вот что-то подобное тебе нужно для встраивания в HTML https://www.npmjs.com/package/gulp-inject

Но если нужно быстрое решение — взгляни на https://parceljs.org/ Он не очень популярен, но весьма крут

[Александр]

Roman Kitaev, спасибо за ваш ответ. Я уже смотрю урок по Webpack. Только все как-то не так, как мне объясняли в другом видео. В видео по Webpack сам Webpack отправляет файл сразу в папку dist. Это логично, но мне объясняли, что разработчик ведет работу в папке src или app, в которой находятся все исходники, в том числе index.html.

[Andrew]

Александр, зависит от того как настроите.
Вэбпак только выполняет нужное, как/куда/что вы ему "говорите"(как и галп).
Вместо видео, попробуйте найти какой-то бойлерплэйт, для ваших нужд и посмотреть как там всё организовано, со временем(после 3-10 таких) поймёте как там и всё и будете писать сами такое, если знаний JS'a хватит.

[Strannyk]

Александр,

Я уже смотрю урок по Webpack. Только все как-то не так, как мне объясняли в другом видео.

Вот почему нельзя полагаться на видео-, прости господи, уроки.

[Александр]

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

Answer 2

[Виталий Осипов]

Дополню к ответам выше, что папка node_modules должна быть просто в проекте локально, а уже на сервере собранный бандл с подключенными библиотеками. node_modules нужно в gitignor поставить, чтобы не загружать это огромное количество файлов. Если работаете в проекте с кем-то, то все пакеты должны быть в package json прописаны. Через консоль потом пакеты локально загружаются в node_modules

Comments

[Александр]

Да, об этом я знаю. Меня интересовало именно то, как разработчики работают с библиотеками JS, а точнее как они их подключают (ведь в 2020 году это не делается традиционным способом aka укажите адрес JS-файла ВРУЧНУЮ в файле .html).