Сборка скрипта разбитого на файлы
 

У меня большой скрипт, который разбит на 20 файлов (чтобы удобней было работать).
На данный момент все эти 20 файлов каждый по отдельности подключается к файлу .html по стандартным методом:

<script src="js/localStorage.js"></script>

Для продакшена я написал task для gulpа, который собирает в один файл в заданном порядке (каждый файл прописан), потом проходит бабелем, потом минимизирует. Тут проблем нет.

А вот можно ли все эти js файлы собрать в один файл app.js через import ?

Я создал файл app.js в нём все 20 файлов прописываю по такой схеме:

import * as localStorage from 'js/localStorage';
import * as preloader from 'js/preloader';
import * as sklonenie from 'js/sklonenie';

В html закомментировал все js файлы и добавил новый app.js - в консоли сразу выстреливает ошибка:
Uncaught SyntaxError: Unexpected token *

В доках https://learn.javascript.ru/modules из за того что несколько вариантов реализации (что то из прошлого, что то из будущего), я не понимаю что мне дальше делать и что я упустил.

В файлы js я ничего не дописывал. Нужно что то как экспорт прописывать или в ES6 не нужно?
Ещё вот мысль что нужно в гальпе написать таск которому отдавать только файл app.js и проходить его бабелем, потом минификатором. Может всё эти импорты для бабеля а не для браузера... я запутался.

Rise,
я правильно понял что все файлы js нужно подключить в html и им указать type="module" ?
или можно только файл app.js подключить, в котором прописаны все импорты?

В таких случаях нужно использовать webpack и не мучиться)

Я несколько раз читал эту статью, статью в учебнике, на мазиле...
Создал специально тестовый проект в отдельной папке - import у меня ни как не хотел работать.

Потом бесмыслено вглядываясь в страницу на developer.mozilla решил открыть в мазиле и чудо произошло - оказывается работает импорт.

А почему в гугл-хроме не работает я не знаю. Никаких настроек я не трогал, только когда то включил установку расширений для браузера с компьютера, а не с магазина.
Гугл-хром вот такую ошибку выводит в консоль:
Access to Script at 'file:///G:/app/import-test/js/app.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Гугл-хром обновил, кенаюз выдаёт что должно работать: https://caniuse.com/#feat=es6-module

Rise, спасибо что прокомментировали. Я 4 дня потратил впустую из за хрома и раньше ещё пробовал (просто бросал разбираться и вникать в суть).

Да, действительно. Запустил вот так:

http://localhost:3000/import-test/index.html

теперь и в гугл-хроме заработало и ошибок больше нет.

Сама тема модулей ES-6 несложная и оч легко запоминается, но вот такие моменты как получилось у меня с хромом, это немного выбивает.