Проблема следующая есть большой код скрипта, который пытаюсь разделить на модули для удобства поддержки в дальнейшем и столкнулся с неоднозначной проблемой.
Классический вариант подключения модулей (из учебников)
Код модуля (обычная кнопка скролла на странице)
Код полностью рабочий
const scrolls = (elem) => {
let btnTop = document.querySelector(elem);
btnTop.addEventListener('click', function () {
window.scroll(0, 0);
});
window.addEventListener('scroll', showBtn);
function showBtn() {
if (window.pageYOffset > document.documentElement.clientHeight) {
btnTop.style.display = 'block';
} else {
btnTop.style.display = 'none';
}
}
};
export default scrolls;
Главный скрипт страницы main.js
//Подключаю модуль
import scrolls from './modules/scrolls.js';
window.addEventListener('DOMContentLoaded', function() {
/*Scroll to Top*/
scrolls('.button_up');
/*END Scroll to Top*/
});
<script src="js/main.js"></script>
Итог получаю ошибку от GoogleChrome
Uncaught SyntaxError: Cannot use import statement outside a module
Проблему нашел, что ошибка вызвана политикой CORS в самом GoogleChrom-е
Решается следующим образом (с обязательным присваиванием type="module" главному скрипту) и обязательно явном указанием расширения в import
import scrolls from './modules/scrolls.js';
<script src="js/main.js" type="module"></script>
Итог
Как грамотно подключать свои модули в главный файл проекта?
Как обходите приведенную мной проблему CORS блокировку от браузеров (без явного указания type module)?
Или сразу переводить проект не на модули а на классы?
Пример:
tabs.js (в нем class Tabs)
navigation.js (в нем class Navigation)
В main.js обратиться к нужному классу перед этим подключив классы в index.html
<script src="js/tabs.js" ></script>
<script src="js/navigation.js" ></script>
<script src="js/main.js" ></script>
let tabs = new Tab();
tabs.showTabs();
let nav = new Navigation(a,b,c)
nav.showNavigation();
if(...){
nav.showMobile();
}
