Laravel 模块化与 webpack+vue.js 处理方案如何解决?

最近公司项目硬性要求使用vue全家桶+element-ui的方式来开发后台,但是原来的项目是requirejs写的,所以所有laravel模块都是可以独立安装和卸载的,也就是说他们的js和css都是独立的,那些公用的直接放在themes/backend主题目录下,那么问题来了,单页程序如何实现这种方案,需求
(注意:这里的module是laravel的module,不是js和npm的module)

  1. 每个模块独立安装,安装后自动publish模块中的Resources/Bakcend/assets目录到public/backend/modules/模块名下面,并且在themes/bakcend/index.blade.php中可以自动加载(已解决)
  2. 单页的后台使用webpack打包,打包目录public/backend/modules/模块名下面,并在打包后自动复制一份到modules/模块名/Resources/Bakcend/assets下面(已解决)
  3. 每个模块可以有自己的后台菜单,管理界面等,并且这些全部用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里面的assetspublic/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不一样,不能选择任何一个加载

请问具体如何解决这个问题呢?

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 1

第一个功能你是如何实现的?即如何将Resources/Bakcend/assets 目录publish 到 public/backend/modules/模块名下面的?在index.blade.php 中如何加载的?

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!