Объединение нескольких небольших приложений в приложение SPA
Извините за скучный вопрос, но это сложная настройка. Наше приложение представляет собой SPA в Monorepo. Приложение является своего рода "оболочкой", которая загружает в нее отдельные приложения меньшего размера. Наша структура папок выглядит следующим образом:
Root/
build/ - All our dev tools and config (including webpack)
node_modules/ - All the dev dependencies for tooling are here
projects/
apps/
shell/
app1/
node_modules/ - All the app dependencies and dev dependencies are here
src/
package.json
tsconfig.json
app2/
...etc
components/
comp1/
src/
package.json
tsconfig.json
comp2/
core/
bootstrapper/
src/
index.ts
package.json
Таким образом, в этой структуре приложение-оболочка - это приложение, которое загружает каждое из "app1", "app2" и т. Д. Это означает, что в приложении-оболочке есть зависимость от app1, app2 и т. Д. Но в дополнение к этому каждый из отдельных приложений также можно запускать автономно, без необходимости запуска из оболочки.
Компоненты - это компоненты, которые мы написали, и зависимости приложений или других компонентов.
Загрузчик - это то, что содержит все зависимости кода платформы (в данном случае aurelia и redux). Это devDependency каждого приложения, но это зависимость оболочки. Это позволяет разработчикам запускать приложения автономно при разработке (но не в производственной среде, где они всегда запускаются из оболочки).
В настоящее время, чтобы собрать и отправить вещи, веб-пакет объединяет все в оболочке в один файл, а затем развертывает его. Все хорошо, все работает, но это не идеально.
Каждое приложение в этом проекте принадлежит различным командам. У каждой команды есть свои собственные циклы выпуска, и мы хотим, чтобы они могли создавать и развертывать свои собственные приложения, не влияя на других. Идеальной настройкой (после комплектации) будет:
bootstrapper.hash.js // Contains our bootstrapper and framework code
app1.hash.js // Contains the app and its dependencies (except bootstrapper and framework)
app2.hash.js // etc
shell.hash.js // The shell code
Из этого нам хотелось бы иметь возможность загружать приложение оболочки и загружать только файлы app1/app2 js по мере необходимости. Насколько я понимаю, нам нужно было бы использовать загрузчик скриптов, чтобы сделать это по требованию, так как webpack не обрабатывает этот вариант использования, с которым я в порядке. Однако я не могу понять, как создать каждое отдельное приложение без загрузочного кода и обеспечить его динамическое включение во время выполнения.
Мы также хотели бы, чтобы приложения находились во время выполнения, без необходимости повторного развертывания других приложений. Если мы добавим app3.hash.js, мы бы хотели иметь возможность загружать это динамически.
Чего я не могу понять, так это как связывать приложения так, как мы хотим. Самое близкое, что я получил, - это использование CommonsChunksPlugin, но для этого нужно собрать оболочку. В идеале нам нужно что-то вроде того, как работает DllPlugin, чтобы мы могли создавать каждое приложение отдельно, но для этого требуется ссылка на его манифест из оболочки, что требует от нас создания оболочки. Мы также попробовали комбинации library и libraryTarget и externals, но безуспешно.
Есть идеи? Спасибо!