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