Как сборщики (например webpack) обрабатывают import from?

Question

[Apl-by]

Пытаюсь понять, как работает import from без бандлеров. Вот например, установил я через npm библиотеку lodash. Я могу использовать её, подключив либо в html через:

<script src="./node_modules/lodash/lodash.min.js"></script>

либо, у меня получается подключить в отдельном модуле через:

// в html  - <script src="index.js" type="module"></script>
// в index.js:
import "./node_modules/lodash/lodash.min.js";

Тут возникает первый вопрос, почему не получается присвоить модуль lodash переменной, через:
import * as _ from "./node_modules/lodash";
или каким-нибудь другим способом? Но при использовании webpack достаточно указать просто:
import * as _ from "lodash";
вообще без указания пути. Что он дополнительно делает, что бы был доступен такой синтаксис, и как понимает, что "lodash" находится в node_modules?
ps: получается, без специальных сборщиков, я могу импортировать только весь модуль целиком, и нет возможности присвоить отдельные методы из модуля переменным?

Comments

[WapSter]

Что он дополнительно делает, что бы был доступен такой синтаксис, и как понимает, что "lodash" находится в node_modules

package.json
А ты уверен, что такой путь существует? ./node_modules/lodash/lodash.min.js

[Apl-by]

WapSter, да, такой путь к lodash.min.js. При src="./node_modules/lodash/lodash.min.js" библиотека подключается

Answer 1

[Aetae]

Чтобы что-то импортировать через import from надо чтобы в конечном файле был соответствующий export(т.е. тот файл тоже должен быть модулем). Простой import - это просто подключение скрипта как есть, всё равно что загрузка через <script>.

npm пакеты содержат разные версии дистрибутивов под разные способы подключения. Надо посмотреть куда указывает module(а не main) в package.json и именно этот файл можно будет подключать через import from.
Если module в package.json нет - значит библиотека не поддерживает современные es модули, увы, и придётся её использовать по-старинке(хотя лучше проверить глазами js файлы, изредка забывают указать). Именно такая ситуация наблюдается с lodash, однако есть либа lodash-es, которая решает эту проблему.

Также es модули - относительно новая система, до неё были commonjs модули, и они до сих пор используются в nodejs(как раз на них указывает main в package.json). Но из коробки без соответствующих либ они уже работать не будут.
Помимо esm и commonjs ещё полно всяких систем, но это уже отдельная тема.

P.S. Это был ответ на текст вопроса, ответ на заголовок - отдельная обширная и не простая тема и вряд ли вам нужен.

Answer 2

[profesor08]

В зависимости от типа модуля, вебпак смотрит на export или module.exports, далее трансформирует код таким образом, чтоб в других местах предоставлять доступ по ссылке (не url, а адрес в памяти).
Браузер обрабатывает модули по своему, зачем это реализовывать в браузере - не знаю, наверно чтоб было.