Я создаю отдельную библиотеку компонентов пользовательского интерфейса, одна из основных идей которой заключается в поддержке множества различных тем (для этого мы используем styled-components
).Итак, у меня есть более 10 файлов тем и, очевидно, я не хочу включать все эти темы в комплект библиотеки (я использую веб-пакет).Поэтому я пытаюсь использовать динамический импорт, и, ну, он выглядит хорошо, пока мне не нужно использовать эту библиотеку компонентов в другом приложении.Все эти динамические чанки с темой загружаются из ouput.publicPath
из components library
конфигурации веб-пакета, когда мне нужно противоположное - я хочу загрузить их на основе publicPath
моего текущего приложения.Есть ли способ решить это?Я не хочу принудительно и жестко кодировать этот publicPath
, поэтому все другие приложения должны использовать тот же publicPath
.
Я пытался настроить publicPath
в components library
, как, например,publicPath: '/dist/'
но это означает, что во всех моих приложениях (использующих эту библиотеку) я должен создать папку dist
и хранить там файлы чанка.Я также не уверен, возможно ли создавать файлы чанков внутри моего приложения (не в библиотеке), поэтому я просто копирую эти файлы после библиотеки (ничего страшного).
Это работает только в том случае, если ясохранить ту же структуру выходных папок в моем приложении
output: {
publicPath: '/dist/',
chunkFilename: '[name].theme.js',
...
},
Как использовать динамический импорт:
/* webpackChunkName: "[request]" */
/* webpackMode: "lazy" */
`./../themes/${brandName}/index`).then(module => {...})
Файл темы в основном представляет собой большой объект, например:
fontFamily: 'Work Sans',
fontSize: '14px',
colors: {
success: '#679863',
error: '#F44336'
},
...
Чего я хочу добиться, так это иметь возможность сказать веб-пакет, где / как загрузить эти блоки динамических тем из внешнего приложения.Это легко сделать, если это одно и то же приложение, но я застрял с его использованием из библиотеки компонентов.