php - Wie löse ich die Laravel-Modularisierung und die WebPack+vue.js-Lösung?

Question

Vor kurzem erforderte das Projekt des Unternehmens die Verwendung von Vue Family Bucket + Element-UI zur Entwicklung des Backends. Das ursprüngliche Projekt wurde jedoch von requirejs geschrieben, sodass alle Laravel-Module unabhängig voneinander installiert und deinstalliert werden können, dh ihre js und css Sie sind alle unabhängig und diese öffentlichen werden direkt im Themenverzeichnis abgelegt. Dann stellt sich die Frage, wie ein Single-Page-Programm diese Lösung implementiert. (Hinweis: Das Modul hier ist das Modul von Laravel , nicht das Modul von js und npm )themes/backend

Jedes Modul wird unabhängig installiert. Das

im automatischen Veröffentlichungsmodul kann automatisch geladen (
1. gelöst

   ) werden Resources/Bakcend/assets目录到public/backend/modules/模块名下面,并且在themes/bakcend/index.blade.phpDas Backend einer einzelnen Seite wird mit Webpack gepackt, und das Verpackungsverzeichnis s ist unten (

   gelöst
)

2. public/backend/modules/模块名下面,并在打包后自动复制一份到modules/模块名/Resources/Bakcend/assetJedes Modul kann über ein eigenes Backend-Menü, eine eigene Verwaltungsschnittstelle usw. verfügen und diese werden alle mit Vue, Vue-Router und Element-UI implementiert. Die Einstiegsseiten aller Module befinden sich unter , (

   gelöst
)
3. 4. Jedes Modul kann von verschiedenen Dritten entwickelt und im allgemeinen Modulzentrum veröffentlicht werden. Benutzer können die erforderlichen Module selbst herunterladen (

   PHP-Backend wurde gelöst, aber Front-End-JS hat Problemethemes/backend_default/index.blade.php).
   Das Problem tritt im Frontend-Aspekt der vierten Anforderung oben auf. Wenn eine Einzelperson oder ein internes Team alle Module entwickelt, wird es kein solches Problem geben. Unterschiedliche Entwicklungen von Drittanbietern verursachen jedoch Probleme bei der Webpack-Verpackung Derzeit gibt es zwei Lösungen, aber keine kann das Problem grundsätzlich lösen

   Das erste ist
Jedes Laravel-Modul ist separat verpackt

, aber die öffentliche Klassenbibliothek kann nicht verarbeitet werden, da es für ein einseitiges Backend unmöglich ist, für jedes Modul eine Vendor.js zu generieren und diese öffentlich zu machen oder zu platzieren öffentliche Klassenbibliothek in die App.js, sodass die insgesamt geladenen Vendor.js und app.js jedes Moduls (Blog-Modul, Kernmodul, Dashboard-Modul usw.) diese öffentlichen Klassenbibliotheken wiederholt laden

Das zweite ist integrierte Verpackung unter einem Theme/Backend-Theme
Die Ressourcen jedes Moduls werden themes/backend/modules/{module-name}里面，打包后自动抽取到各自的module/Resources/Backend/assets中，然后别人安装module的时候自动publish这个module里面的assets到public/backend/modules/{module-name}目录里，但是这样也不行，因为如果每个开发者负责的module不同，所以在webpack.config.js or webpack.mix.js里打包的东西也是不同的，比如我写blog module的app.js,你写 dashboard module的app.js，那么各自打包后的assets生成的vendor.js (in der öffentlichen Klassenbibliothek gespeicherte Dateien) mit unterschiedlichen Webpack-Modul-IDs platziert (auch wenn die öffentlichen Klassen von app.js aller Module Wenn die Bibliotheken gleich sind), tritt beim Laden der app.js verschiedener Module nach der Veröffentlichung ein Fehler auf, da die Vendor.js jedes Moduls unterschiedlich sind und Sie keines zum Laden auswählen können

Wie kann dieses Problem konkret gelöst werden?

Answer 1

参考：/a/11...
基于 webpack 的 SPA 单页 Web 应用 动态加载插件的机制