Как решить проблему с инициализацией модуля?

Question

[dmitriu256]

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

Классический вариант подключения модулей (из учебников)
Код модуля (обычная кнопка скролла на странице)
Код полностью рабочий

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();
}

Answer 1

[Шохрух Шаймардонов]

Либо используйте browserify либо вместо import используйте require()
Читайте статью о разнице import и require

Answer 2

[Дмитрий]

Как грамотно подключать свои модули в главный файл проекта?

Так, как вы сделали в конце.

Как обходите приведенную мной проблему CORS блокировку от браузеров (без явного указания type module)?

А это не проблема, которую надо как-то решать. У вас есть несколько способов на выбор: вы можете просто подключать файлы js (тем самым помещая их код в глобальный контекст), либо подключать ES модули при помощи атрибута type=module, либо использовать бандлеры.

Или сразу переводить проект не на модули а на классы?

Классы в JS — это просто такая же сущность, как и функции, переменные и др., их может быть несколько в одном файле, например. С точки зрения разделения кода на модули с отношениями импорта/экспорта классы не являются чем-то особенным.

Answer 3

[Максим]

Тут прямо просится какой нибудь бандлер (например webpack): потому что надо будет что-то делать с версионностью скриптов (руками добавлять ?v0.1 в конце имени файла - дело такое себе). Ещё минификация кода, подключение дополнительных пакетов из npm, дев сервер с горячей перезагрузкой, транспайлер babel. Сюда же можно добавить CSS обработку (препроцессор scss/less, автопрефиксер, минификация) и другие плюшки web-разработки. Вспоминаю, как было трудно поддерживать проекты без этого.