最近公司專案硬性要求使用vue全家桶element-ui的方式來開發後台,但是原來的專案是requirejs寫的,所以所有laravel模組都是可以獨立安裝和卸載的,也就是說他們的js和css都是獨立的,那些公用的直接放在themes/backend
主題目錄下,那麼問題來了,單頁程式如何實現這種方案,需求
(注意:這裡的module是laravel的module,不是js和npm的module)
每個模組獨立安裝,安裝後自動publish模組中的Resources/Bakcend/assets
目錄到public/backend/modules/模組名稱
下面,並且在themes/bakcend/index.blade.php
中可以自動載入(已解決)
#單頁的後台使用webpack打包,打包目錄public/backend/modules/模組名稱
下面,並在打包後自動複製一份到modules/模組名稱/Resources /Bakcend/asset
s下面(已解決)
#每個模組可以有自己的後台選單,管理介面等,並且這些全部用vue,vue-router,element-ui實作,所有模組的入口頁位於themes/backend_default/index. blade.php
,(已解決)
4.每個模組可以由不同的第三方自行開發,發佈到總的模組中心,使用者可以自行下載所需模組( PHP後端方面已解決,前端JS方面就出現問題了)
問題就出現在以上需求的第四條的前端方面,如果個人或者一個內部團隊開發所有模組就沒有這個問題,但不同的第三方開發就引起了webpack打包的問題
目前有兩種方案,但是都無法從根本解決問題
第一種是每個laravel-module單獨打包,但是公共類別庫無法處理,因為單頁的後台不可能每個module的都產生一個vendor.js放置公共或把公共類別庫放入app.js,這樣在總的themes/backend_default/index.blade.php
裡面載入每個module(blog-module,core-module,dashboard-module等)的vendor.js和app.js就會重複載入這些公共類別庫
第二種是一個themes/backend主題下整合打包
每個module的資源都放在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
(公共類別庫存放的檔案)的webpack module id不同(即使所有的module的app.js的公共類別庫都一樣),publish後面載入不同的module的app.js就會出錯,因為每個module的vendor.js不一樣,不能選擇任何一個載入
請問具體如何解決這個問題呢?