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

对于一个多团队协同开发的前端管理后台项目(vue),现在有什么比较成熟的协同开发方案吗?比如前端微服务,现在是否是个可行的开发项目?

  •  
  •   retrocode · 2022-03-21 10:14:32 +08:00 · 2245 次点击
    这是一个创建于 960 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前公司需要开一个新项目,预计会分多个模块,部分外包,部分自行消化,由于是个聚合系统,会对接多方接口.

    预计到人员嘈杂到时候在开发时会有很大的冲突,后端还好微服务独立部署问题不大,前端由于是一个统一的后台,并行开发的模块光提交造成的冲突可能就会很多,需要提前准备一个协同方案.

    哪种设计更合理可减少协同冲突? 前端微服务是否是一个可行的方案? 或者大家公司是否有类似的经验可以让我参考下?

    12 条回复    2022-03-23 15:11:38 +08:00
    relsoul
        1
    relsoul  
       2022-03-21 11:15:50 +08:00
    正好在做这块
    1. 微服务解决的是 project 与 project 之间的问题,微服务还需要有个统一的大入口,要跟 pm 进行沟通
    2. 如果只是 project 级别内的问题 可以考虑 git submodule 从 component 和 router 级别进行抽离就行了
    3. 代码冲突避免不了 内部人员开发也都会出现这些问题,如果想避免 那就在后台写一套 npm auto import 框架 通过 npm 包的形式再抽离开,前提是该有的变量要 export 出去,这里其实也会涉及到规范

    上面的 1 ,3 都比较麻烦 看你的 time buffer 还有多少了 以及你有多少人去填这个坑
    otakustay
        2
    otakustay  
       2022-03-21 11:23:22 +08:00
    听上去虽然有多方开发,但各方至少在技术和工具上是可控的,那就 Module Federation
    3dwelcome
        3
    3dwelcome  
       2022-03-21 11:35:51 +08:00
    反正都是从头开发,直接用组件模式隔离不是挺好的。

    前端微服务以前都是深度隔离,都是要用 postMessage 来传递消息。或者一部分代码干脆放 webworker 里,这样过于复杂化了。

    当然要我来开发,直接用 wasm 插件隔离。有几个模块,就导入几个 wasm 文件,作为插件用 JS 动态载入。
    retrocode
        4
    retrocode  
    OP
       2022-03-21 12:07:58 +08:00
    @relsoul #1 时间应该是充裕的,按现在的设想,往后需要把 现有项目和后续新开项目全部整合进去,唯一担心的就是初始没规划好后面堆屎山

    @otakustay #2 好的,我了解下
    @3dwelcome #3 不至于不至于,一个跑业务的管理后来我感觉还用不上 wasm
    cxe2v
        5
    cxe2v  
       2022-03-21 13:08:10 +08:00
    如果各个团队负责开发的是不同的功能,那么前端微服务挺适合,如果是都在相同的功能模块上开发功能,那需要从代码结构上做调整
    abcd191898105
        6
    abcd191898105  
       2022-03-21 13:25:57 +08:00 via iPhone
    @retrocode 京东的 microApp 微服务框架。完美解决你的问题
    relsoul
        7
    relsoul  
       2022-03-22 11:47:49 +08:00
    @retrocode 那你可以考虑直接上微服务,qiankun 可以考虑一下
    fox2081
        8
    fox2081  
       2022-03-23 10:52:01 +08:00
    如果是同技术框架没有旧的技术包袱的情况下,没有使用微服务的必要,建议使用私有 NPM 解决问题就行,可以将 API 、样式、打包、代码规范等统一成公共仓库,主力团队负责维护,功能模块各团队负责用类库模式打包上传到 NPM ,最终整合成一个系统就行

    既然发在 Vue 分区,肯定是用 Vue ,大家统一好版本,最好上 TS (打包之后 dts 相当于文档,会省很多沟通成本)

    就拿我现在使用的方案来说,我把统一的后端接口调用单独放一个 api 仓库,然后基础框架仓库(主要是公共 Vuex 、工具、基础配置等等)、UI 库、样式库等等公共库都上传到公司的 npm ,并且使用统一的 eslint+prettier 、cli 、babel 、打包工具等配置也做成 npm 包上传(也可以不用,只要最终能提供打包之后的代码和资源),然后具体功能模块放在各自的仓库,使用 cli 脚本打包提交到 npm ,然后最终系统统一整合,有些是直接挂在路由上,有些是提供弹窗或者内嵌的组件式调用,项目之间只通过 npm 依赖,其他全部互不影响。
    retrocode
        9
    retrocode  
    OP
       2022-03-23 11:51:50 +08:00
    @fox2081 #8 这的确也是个方法,说白了统一脚手架基础功能, 构建时提取各仓库 src 内的 view 文件进行打包,可以这么理解吧
    fox2081
        10
    fox2081  
       2022-03-23 12:03:21 +08:00
    @retrocode 准确说是预编译,只是统一工具链,而不是一次性打包全部,各自打包,只要提供最终生成的 cjs 或者 esm 就行,统一打包路径什么都是问题,而且代码膨胀之后打包性能会很差
    retrocode
        11
    retrocode  
    OP
       2022-03-23 13:36:49 +08:00
    @fox2081 #10 这个有文章或 demo 之类的链接吗 我想研究下 感觉跟我们的业务架构蛮相似的
    fox2081
        12
    fox2081  
       2022-03-23 15:11:38 +08:00
    @retrocode 没有写博客的习惯,都是凭着对这些的理解去做的,简单说就是每个模块功能项目都是个大号的组件库,你可以自己装个私有 npm ,我用的 docker 安装的 verdaccio ,然后 webpack 、rollup 、vite 之类的打包工具试着弄个组件库,demo 的话可以参考下流行的组件库,比如 element 、antd 、naive 等等,大多思想都是一样的。

    最后,我觉得协同工作,尤其是跨团队的,一定要用上 TS ,能避免很多协作上的低级问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3618 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 04:24 · PVG 12:24 · LAX 20:24 · JFK 23:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.