Импорт модуля ради «побочных эффектов»?

Начал изучать webpack, увидел пример импорта import './css/main.css'; на MDN пишут что это Импорт модуля ради «побочных эффектов». Никакой интерпретации и наглядных примеров нет. Я новичок поэтому если не сложно обЪясните понятно, что значит такой импорт?
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
Для начала стоит понять сам термин "побочный эффект".
Вот Вы вызываете функцию, а она что-то делает за своими пределами, например пишет в файл или localStorage, или меняет Ваш DOM на странице, или меняет глобальные объекты. Это и есть побочные эффекты.
Модуль тоже может иметь побочные эффекты. Например Вы можете не просто экспортировать некоторые функции из модуля, но и сразу что-то сделать, вне всяких функций.
Например пусть у нас будет такой модуль:
const div = document.body.appendChild(document.createElement('div'));

export function remove() {
  document.body.removeChild(div);
}
Даже если мы просто импортируем его, но не вызываем функцию remove, он все равно произведет свой побочный эффект - добавит новый div в body. И это произойдет при первом встретившемся импорте.
Нам в принципе может быть и не нужна функция remove (ее даже может и не быть), но нам нужен этот div в body - тогда можем просто сделать импорт как в Вашем примере и получить div в body в качестве результата.

Конкретно в контексте вебпака и импортирования стилей, у Вас скорее всего будет включен в обработку или style-loader или MiniExtractCssPlugin.loader. Побочный эффект style-loader - добавление тега style со стилями из импортируемого css в head. А у MiniExtractCssPlugin.loader - побочный эффект - извлечение стилей в отдельный файл.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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