Как должна организовываться модульная система?

Question

[Артем Андреев]

Есть такая структура:
HTML

<script src="static/scripts/myScripts/chartModule/module.js" type="module" charset="utf-8"></script>
 <script src="static/scripts/myScripts/requestOpenWeather.js" charset="utf-8"></script>

JS:

//module.js
import  chartModule from '/static/scripts/myScripts/chartModule/myChart.js'; // импортирует функцию для создания графиков

//requestOpenWeather.js
chartModule.create()

при вызове в файле requestOpenWeather.js пишет что chartModule не найден, как сделать чтобы они были в одной области видимости?

Answer 1

[Дмитрий Беляев]

модули имеют изолированную область видимости, на то они и модули
Вам нужно явно поместить chartModule в глобальный объект:

//module.js
import  chartModule from '/static/scripts/myScripts/chartModule/myChart.js'; // импортирует функцию для создания графиков

// помещаем chartModule в window, чтоб он был доступен глобально
window.chartModule = chartModule;

Comments

[Артем Андреев]

Это обычная практика или у меня криво все?

[Дмитрий Беляев]

Артем Андреев, лучше конечно переделать requestOpenWeather.js в модуль и импортировать в нем chartModule
но если это сборка какой либо библиотеки, боюсь у Вас могут быть сложности с этим

в идеале, у Вас должно быть всего 2 тега скрипт: модуль-точка входа и фолбэк собранный сборщиком (например webpack) для браузеров не поддерживающих модули
все остальное должно подключаться через import

но в легаси проектах это не всегда возможно, предложенный мой подход вполне решает проблему, когда на рефакторинг всего проекта нет времени/ресурсов

[Артем Андреев]

Дмитрий Беляев, Спасибо! Получается, если используешь модули, то весь проект вокруг этого крутится, я правильно понял?

[Дмитрий Беляев]

Артем Андреев, да, правильно... но не всегда достижимо для старого кода, написаного в домодульную эпоху