Как выглядит рабочий процесс при разработке (сайта) на Node.JS с ES6 модулями?

Question

[Алексей Сегодин]

Привет!
Столкнулся с такой проблемой: начинаю потихоньку разбираться как работают ES6 модули и оказалось, что это настолько медленно, что писать код просто невозможно.

Вот как у меня выглядит процесс сейчас:

1. заметил, что у меня в коде ошибка
   
2. останавливаю локальный сервер
   
3. исправляю ошибку
   
4. запускаю сборку проекта, например через Webpack
   
5. запускаю сервер
   

...и так по кругу: из пункта 5 к пункту 1. Я только начал и мне от такого процесса уже плохо. Скорость написания кода снизилась раз в 10.
Скажите, может быть я чего-то не знаю и не понимаю каких-то самых базовых принципов разработки?
Я очень надеюсь, что я неправ или чего-то не знаю. Потому что то, что я описал выше не выглядит как современная разработка сайтов в 21-м веке, где все повально переходят на ES6 модули.
Заранеее спасибо!

Обновление:
Вот столько времени занимает изменение JS файла и сохранение изменений. В общем всё, что описано в пунках 1-5 выше (примерно 25 секунд):

Comments

[Антон Швец]

если вам только es модули нужны, то зачем вебпак?

[Алексей Сегодин]

Антон Швец, а как посмотреть результат работы скрипта на фронтенде, если браузер не понимает import? Я в этом всём пока плохо разбираюсь, поэтому если вы дадите чуть более развернутый ответ, то буду благодарен.

[Антон Швец]

Алексей Сегодин, вы уж определитесь, вы для ноды что-то пишете или у вас браузер.
И кстати понимает https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Алексей Сегодин]

Антон Швец, я в этом всём плохо разбираюсь и пришел сюда за ответами. Мне как раз трудно определиться и разобраться. Потому что в интернете куча разрозненной и информации в которой я уже второй день копаюсь.
Мой Хром версии 78 не может интерпретировать класс вызванный через import. Но через rollup или webpack всё работает.
Конкретно мой случай:
https://discourse.threejs.org/t/importing-three-js...

И я всегда допускаю, что я что-то делаю неправильно. Но как правильно и чтобы применительно в моей ситуации — нигде не могу найти.

[Антон Швец]

Алексей Сегодин, на данный момент, несмотря на существование спецификации импортов и 4 года прошедших с момента выхода ес2015 импорты вживую практически не используются.
Все используют сборщики типа вебпака, для которых импорт - всего лишь указание как собирать весь код в один файл. Они поддерживают разные форматы импорта и исправляют некоторые ошибки, сохраняют совместимость.

Ну и вам там указали в чем вы ошиблись.

Answer 1

[abberati]

Webpack devserver делает пункты 2,4,5 сам в автоматическом режиме.

Answer 2

[McBernar]

Ну камон. Hot reload. Если сами не хотите разбираться — посмотрите пару роликов на ютубе по стартовой настройке вебпака.

Comments

[Алексей Сегодин]

Я к вопросу приложил видео того сколько занимает процесс обновления JS файла. Даже если предположить, что автоматизированный процесс работает быстрее, потому что не нажимает кнопки на клавиатуре, то вся остальная работа компьютера всё равно занимает слишком много времени. И тогда это совсем не выход.
Или hot reload делает это как-то иначе?

[McBernar]

Алексей Сегодин, да. Запуск сервера и его пересборка в релоаде — огромная разница. Он и не отключается, по-сути, просто заменяет в кэшэ измененный файл.

Просто подключите.

[Алексей Сегодин]

McBernar, а напишите пару ссылок на то о чем вы говорите. А то нашел столько hot- и live-reload-ов, что трудно выбрать. И у большинства из них документация плохая.

[Антон Швец]

Алексей Сегодин, даже без хотрелоада, вы тут каждый раз сборку запускаете заново, а в watch режиме webpack пересобирет только то, что изменилось.

Answer 3

[Владимир Голубь]

nodemon, причем тут webpack, если запускаете сервер на node.js

Comments

[Алексей Сегодин]

потому что при использовании ES6 модулей браузер не понимает, что значит import и не может обрабатывать такой код. Плагины типа Webpack проходят по проекту и собирают код из всех "import" в один JS файл