V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lichnow
V2EX  ›  Vue.js

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

  •  1
     
  •   lichnow · 2017-06-22 21:38:10 +08:00 · 3525 次点击
    这是一个创建于 2718 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近公司项目硬性要求使用 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 不一样,不能选择任何一个加载

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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2599 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 06:52 · PVG 14:52 · LAX 22:52 · JFK 01:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.