@Apl-by

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

Пытаюсь понять, как работает 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: получается, без специальных сборщиков, я могу импортировать только весь модуль целиком, и нет возможности присвоить отдельные методы из модуля переменным?
  • Вопрос задан
  • 83 просмотра
Решения вопроса 2
Aetae
@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. Это был ответ на текст вопроса, ответ на заголовок - отдельная обширная и не простая тема и вряд ли вам нужен.
Ответ написан
profesor08
@profesor08 Куратор тега JavaScript
В зависимости от типа модуля, вебпак смотрит на export или module.exports, далее трансформирует код таким образом, чтоб в других местах предоставлять доступ по ссылке (не url, а адрес в памяти).
Браузер обрабатывает модули по своему, зачем это реализовывать в браузере - не знаю, наверно чтоб было.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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