Как настроить import {...} from '...' в js Laravel-проекте

Есть проект на "laravel/framework": "^6.2", где админка работает на web-роутах, blade, js+ajax. Все это добро мягко говоря устарело. Технической возможности обновить Ларавель, подключить vue.js, typescript либо что-то еще глобально пока нет. Но можно рефакторить отдельные сервисы, включая джаваскрипт. Сейчас джаваскрипт, это одноуровневая пачка файлов с функциями, которые собираются вебпаком в один скрипт. Хочу подвести эти скрипты максимально к подобию ООП, использовать классы, enum и т.п..., разделить скрипты по функциональному признаку, а не по принципу на какой странице они используются. Подключить axios. В общем все, что можно выжать из сырого js (с перспективой перехода на typescript).

Возникла проблема при использовании export/import. Создал файл routes.js, который содержит несколько экспортов:

Код (Javascript):

1. export const Method = {
2.     get: 'GET',
3.     put: 'PUT',
4.     post: 'POST',
5.     delete: 'DELETE'
6. }

Код (Javascript):

1. export function getWebRoute(alias, method, queryParams)

В другом скрипте SendWebRoute.js пытаюсь импортировать:

Код (Javascript):

1. import {Method} from 'routes'
2. console.log(Method.get)

Скрипт SendWebRoute.js подключаю во вьюхе так:

HTML:

1. <script src="{{ asset('js/services/SendWebRoute.js') }}"></script>
2.  

На странице в консоли получаю ошибку:

Uncaught SyntaxError: Cannot use import statement outside a module

Решения пишут типа в package.json добавить
type: "module"
Также предлагали сделать следующее:

HTML:

1.     <script type="module" src="{{ asset('js/services/SendWebRoute.js') }}"></script>
2.  

Также пробовал прописывать module.exports вместо export в routes.js.

Ничего из этого не помогло. Были еще ошибки типа:

Cannot use import statement outside a module
Unexpected token export

Кто может подсказать как правильно настроить старый Ларавель, чтобы я мог делать экспорт/импорт как это делается например в Vue.js.

 

Да это просто пример енама, который я экспортирую из одного скрипта в другой. Нет разницы что я там напишу - экспорт не работает.

А где его прописать нужно, в html при подключении скрипта или в package.json?

Ну как сказать, сотни функций в одном скрипте. Что-то там исправить, это каждый раз дебаг на пару часов. И речь не о SPA сейчас, а о том, чтобы не используя другие технологии, немного все же сделать код более читабельным.

Это не то, что я хочу. Микс ведь просто соберет все скрипты в один большой скрипт. А я хочу явно в скриптах прописывать импорты нужных мне енамов, функций, классов

Код (Javascript):

1. import {Method} from 'routes'
2. console.log(Method.get)

 

Так может у вас vue.js, полноценно настроен, и все что к нему полагается - router, nuxt, или что-то в этом роде.