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

[retrocode]

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

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

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

[relsoul]

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

上面的 1 ，3 都比较麻烦 看你的 time buffer 还有多少了 以及你有多少人去填这个坑

[otakustay]

听上去虽然有多方开发，但各方至少在技术和工具上是可控的，那就 Module Federation

[3dwelcome]

反正都是从头开发，直接用组件模式隔离不是挺好的。

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

当然要我来开发，直接用 wasm 插件隔离。有几个模块，就导入几个 wasm 文件，作为插件用 JS 动态载入。

[retrocode]

@relsoul #1 时间应该是充裕的,按现在的设想,往后需要把 现有项目和后续新开项目全部整合进去,唯一担心的就是初始没规划好后面堆屎山

@otakustay #2 好的,我了解下
@3dwelcome #3 不至于不至于,一个跑业务的管理后来我感觉还用不上 wasm

[cxe2v]

如果各个团队负责开发的是不同的功能，那么前端微服务挺适合，如果是都在相同的功能模块上开发功能，那需要从代码结构上做调整

[abcd191898105]

@retrocode 京东的 microApp 微服务框架。完美解决你的问题

[relsoul]

@retrocode 那你可以考虑直接上微服务，qiankun 可以考虑一下

[fox2081]

如果是同技术框架没有旧的技术包袱的情况下，没有使用微服务的必要，建议使用私有 NPM 解决问题就行，可以将 API 、样式、打包、代码规范等统一成公共仓库，主力团队负责维护，功能模块各团队负责用类库模式打包上传到 NPM ，最终整合成一个系统就行

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

就拿我现在使用的方案来说，我把统一的后端接口调用单独放一个 api 仓库，然后基础框架仓库（主要是公共 Vuex 、工具、基础配置等等）、UI 库、样式库等等公共库都上传到公司的 npm ，并且使用统一的 eslint+prettier 、cli 、babel 、打包工具等配置也做成 npm 包上传（也可以不用，只要最终能提供打包之后的代码和资源），然后具体功能模块放在各自的仓库，使用 cli 脚本打包提交到 npm ，然后最终系统统一整合，有些是直接挂在路由上，有些是提供弹窗或者内嵌的组件式调用，项目之间只通过 npm 依赖，其他全部互不影响。

[retrocode]

@fox2081 #8 这的确也是个方法,说白了统一脚手架基础功能, 构建时提取各仓库 src 内的 view 文件进行打包,可以这么理解吧

[fox2081]

@retrocode 准确说是预编译，只是统一工具链，而不是一次性打包全部，各自打包，只要提供最终生成的 cjs 或者 esm 就行，统一打包路径什么都是问题，而且代码膨胀之后打包性能会很差

[retrocode]

@fox2081 #10 这个有文章或 demo 之类的链接吗 我想研究下 感觉跟我们的业务架构蛮相似的

[fox2081]

@retrocode 没有写博客的习惯，都是凭着对这些的理解去做的，简单说就是每个模块功能项目都是个大号的组件库，你可以自己装个私有 npm ，我用的 docker 安装的 verdaccio ，然后 webpack 、rollup 、vite 之类的打包工具试着弄个组件库，demo 的话可以参考下流行的组件库，比如 element 、antd 、naive 等等，大多思想都是一样的。

最后，我觉得协同工作，尤其是跨团队的，一定要用上 TS ，能避免很多协作上的低级问题。