Как собрать Разные js-бандлы, использующие Общие компонеты(модули ES6), если эти модули имеют внешние зависимости?

Question

[bjorn-mozyakin]

Никак не пойму, как правильно использовать общие es6 модули (из собственной библиотеки модулей, к примеру), когда требуется собрать из них 2 разных js-бандла (например, для desktop и mobile версии сайта). В ситуации, когда эти общие модули имеют внешний зависимости.

Допустим надо реализовать перекрашивание кнопки в синий цвет при клике на ней.
Структура модулей в упрощенном виде такая:

// ===== mainMobile.js - главная точка входа

import Button from './button.js';

let colorMain = 'blue';
new Button(document.querySelector('.button'));

export { colorMain }

// ===== button.js

import { colorMain } from './mainMobile.js';

export default class Button {
  constructor(elem) {
    this.elem = elem;
    this.elem.addEventListener('click', () => { this.paint(); })	
  }

  paint() {
    this.elem.classList.add(`button_${colorMain}`);
  }
}

Указываю webpack точку входа - mainMobile.js - бандл отлично собирается.

Теперь допустим, надо собрать другой бандл (для desktop). Desktop имеет мелкие отличия (например, при клике на кнопку, она перекрашивается в зеленый, а не в синий)
Я создаю файл mainDesktop.js, похожий на mainMobile.js. Для кнопки на desktop я хочу использовать уже имеющийся модуль button.js.

// ===== mainDesktop.js - главная точка входа

import Button from './button.js';

let colorMain = 'green';
new Button(document.querySelector('.button'));

export { colorMain }

И сталкиваюсь с проблемой. В общем модуле button.js мне надо замимпортить переменную colorMain, но откуда? В сборке для mobile она должна импортится из mainMobile.js, в сборке для desktop - из mainDesktop.js.
Как разграничить? На уровне js-кода или на уровне конфига сборки webpack? Нет понимания

Во-первых, предполагаю, что как-то могут помочь динамические импорты, но не могу сообразить как их использовать.
Во-вторых, предполагаю, что может быть неверен мой первоначальный подход (когда из главной точки входа я в принципе что-то экспорчу в модули). Но какая альтернатива?

Comments

[Lynn «Кофеман»]

Переделать этот ад на нормальную передачу данных аргументами. Типа такого:
new Button(elem, { color: 'red' })

[bjorn-mozyakin]

Алексей Тен, в простом примере с цветом - да.
А что если при клике на кнопку надо открывать, например, форму. Форма - отдельный модуль. Удобно было бы вместо того, чтобы импортить и создавать форму в каждом модуле, где она нужна, - однажды создать экземпляр класса Form в mainMobile.js и экспортировать.

// ===== mainMobile.js - главная точка входа

...

let form = new Form(document.querySelector('.form'));

export { form }

И тогда в модуле button.js опять возникает импорт из mainMobile.js

[Lynn «Кофеман»]

bjorn-mozyakin, Как только у вас возникает импорт mainMobile — значит у вас опять ошибка в архитектуре.

Не вижу никакой разницы между цветом и формой.

// ===== mainMobile.js - главная точка входа
import Button from './button.js';

let form = new Form(document.querySelector('.form'));
let colorMain = 'green';
new Button(document.querySelector('.button'), {
    color: colorMain,
    form: form
});

[Lynn «Кофеман»]

Вообще почитайте например как устроен React и его компоненты.

[bjorn-mozyakin]

Алексей Тен, спасибо. Про React читал и еще буду читать. Но, возможно, что-то удастся прояснить благодаря вам.

Т.е. импорт из mainMobile - это ошибка в архитектуре (ага, собственно, догадывался), а вместо этого все инстансы классов, которые используются в других Модулях, надо передавать в виде параметров к Классу? Т.е. если Форма используется в 10 других модулях - передаем ее в каждый из них через параметр класса? И если какой-то модуль требует 10 инстансов - тоже все их передаем через параметры? И это общепринятый метод и нормально с точки зрения архитектуры?

// ===== mainMobile.js - главная точка входа
...

let form = new Form(document.querySelector('.form'));

let button = new Button(document.querySelector('.button'), {
 form: form
});

let sidebar = new Sidebar(document.querySelector('.sidebar'), {
  form: form
});

let topbar new Topbar(document.querySelector('.topbar'), {
  form: form,
  button: button,
  sidebar: sidebar
});

[Николай Егоров]

bjorn-mozyakin, Приветствую! Поделитесь опытом к чему в итоге пришли? На мой неопытный взгляд, передавать зависимости в модуль через конструктор (или сеттеры...) это правильное решение. Эта техника вроде так и называется - внедрение зависимостей.