Как webpack делает bundle из библиотек в node_modules?

Question

[DarthJS]

Есть библиотеки в node_modules и насколько я понимаю webpack бандлит импортируемые библиотеки в vendors, если мы укажем и минифицирует. Но в библиотеках часто встречаю dist и src, соответственно можно использовать уже минифицированный dist, но тогда зачем бандлить библиотеки через webpack?
Вопросы:
- Нужно ли бандлить библиотеки из node_modules?
- Как использовать dist библиотек из node_modules?
- Зачем dist в библиотеках, если вдруг это не используется при бандле webpack?

Answer 1

[Антон Швец]

- Нужно ли бандлить библиотеки из node_modules?

обычно их все в vendor.js помещают. Нужно это или нет, решаете сами.

- Как использовать dist библиотек из node_modules?

В мануалах к библиотекам должно быть написано. Обычно просто делается import пакета. А там уж как разработчик библиотеки повелел.

- Зачем dist в библиотеках, если вдруг это не используется при бандле webpack?

А если пользователь библиотеки не использует webpack?

Плюс часто делают amd, esm варианты. Для разных схем импорта.

Comments

[DarthJS]

"Обычно просто делается import пакета." - но может же импортироваться как с src так и с dist? Как узнать откуда импортируется? Поэтому и пытаюсь понять нужно ли специально бандлить библиотеки, минифицировать их итд

[Антон Швец]

DarthJS, я же говорю, как скажет разработчик.
Вот возьмем jquery, она собирается с помощью grunt, и что там у нее в dist я даж не знаю.
Разработчик говорит - сделайте import $ from "jquery";, если используете webpack
Что именно оно импортирует в таком случае?
В package.json пакета указано "main": "dist/jquery.js",, вот его сборщик и импортирует.
Очевидно, что это не бандл, и паковать надо своим сборщиком уже после импорта.

Вы можете использовать свою какую-то систему сборки, где, допустим, нет этапа минифицирования, тогда можно взять уже собранный вариант, dist/jquery.min.js
Все эти варианты добавляются в пакет на разные случаи.

[DarthJS]

Антон Швец, Спасибо за подробности