Импорт переменной. Как получить доступ к переменной из другого файла?

149

15 марта 2019, 17:40

Я пытаюсь сделать переменную глобальной и получить доступ к ней с другого файла, но у меня ничего не получается.

HTML:

<body>
    <button id="btn">Кнопка</button>
    <script src="/main.js"></script>
    <script src="/additional.js"></script>
</body>

main.js:

import { globalVar } from "./additional.js";
document.querySelector("#btn").addEventListener("click", function () {
  alert(globalVar.value);
});

additional.js:

export var globalVar = {
  value: "Hello world!"
};

В чем моя ошибка?

Answer 1

Чтобы использовать import и export вы должны обращаться к файлу как к модулю, добавив type="module". И вам не нужно подключать additional.js, потому что переменная импортирована уже в main.js.

Пример:

<body>
    <button id="btn">Кнопка</button>
    <script src="./main.js" type="module"></script>
</body>

Печально, что мы не можем показывать работу модулей в SO песочнице, полноценный пример можете посмотреть по ссылке.

И да переменная globalVar не является глобальной, это локальная переменная, которая импортирована из другого файла. Любые другие модули могут также импортировать данную переменную или любые другие переменные, но они не глобальные.