Почему один файл может не видеть функции и методы из другого файла?

Question

[lolrofl01]

Есть точка входа app.js. Здесь находятся общие скрипты для всех страниц сайта. Но на каждой странице есть и дополнительные скрипты. Например, product.js на странице продукта, или contacts.js на странице контактов.

Эти файлы подключаются ПОСЛЕ app.js. Все файлы собираются через webpack. Так вот, возникла необходимость в файле product.js вызвать функцию из app.js. И вот беда, вылезает ошибка, говорит нет такой функции. Но как же так, она есть в app.js и app.js подключен выше чем product.js? Как решить эту проблему?

Answer 1

[Алексей Ярков]

Вы не понимаете как это работает. Раз уж у вас вебпак, то и используйте экспорт/импорт.

Comments

[lolrofl01]

В таком случае теряется логика. Будет грубо говоря 1 файл со всеми скриптами со всех страниц. И зачем он такой нужен? Потому я и сделал разделение.

Если в файле product.js импортировать app.js, то получается на странице будет подключен app.js (это не изменить) и будет еще раз подключен он же в виде импорта для product.js и сам product.js.

Если в app.js импортнуть product.js - тогда функции из product.js будут доступны на всех страницах сайта. Опять не то.

[Алексей Ярков]

lolrofl01, а если разобраться как работает экспорт и импорт, то всё будет работать.

product.js

export function bla() {}
// остальной мега супер код, который не попадёт никуда, если его не импортировать по имени
export function blabla() {}

app.js

import {bla} from "product";

bla();
// кроме функции bla сюда и не попадёт ничего

[lolrofl01]

Алексей Ярков, Вот спасибо огромное! Совсем не туда смотрел.

[Алексей Ярков]

lolrofl01, на здоровье))

[Rerurk]

Блин, спасибо, я тоже решил что чего то не знаю))