对于一个多团队协同开发的前端管理后台项目(vue),现在有什么比较成熟的协同开发方案吗?比如前端微服务,现在是否是个可行的开发项目?
retrocode · 2022-03-21 10:14:32 +08:00 · 2254 次点击这是一个创建于 970 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前公司需要开一个新项目,预计会分多个模块,部分外包,部分自行消化,由于是个聚合系统,会对接多方接口.
预计到人员嘈杂到时候在开发时会有很大的冲突,后端还好微服务独立部署问题不大,前端由于是一个统一的后台,并行开发的模块光提交造成的冲突可能就会很多,需要提前准备一个协同方案.
哪种设计更合理可减少协同冲突? 前端微服务是否是一个可行的方案? 或者大家公司是否有类似的经验可以让我参考下?
 |
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 还有多少了 以及你有多少人去填这个坑 |
 |
2
otakustay 2022-03-21 11:23:22 +08:00
听上去虽然有多方开发，但各方至少在技术和工具上是可控的，那就 Module Federation
|
 |
3
3dwelcome 2022-03-21 11:35:51 +08:00
反正都是从头开发，直接用组件模式隔离不是挺好的。
前端微服务以前都是深度隔离，都是要用 postMessage 来传递消息。或者一部分代码干脆放 webworker 里，这样过于复杂化了。 当然要我来开发，直接用 wasm 插件隔离。有几个模块，就导入几个 wasm 文件，作为插件用 JS 动态载入。 |
 |
4
retrocode OP |
 |
5
cxe2v 2022-03-21 13:08:10 +08:00
如果各个团队负责开发的是不同的功能，那么前端微服务挺适合，如果是都在相同的功能模块上开发功能，那需要从代码结构上做调整
|
 |
6
abcd191898105 2022-03-21 13:25:57 +08:00 via iPhone
@retrocode 京东的 microApp 微服务框架。完美解决你的问题
|
 |
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 依赖，其他全部互不影响。 |
|
9
retrocode OP @fox2081 #8 这的确也是个方法,说白了统一脚手架基础功能, 构建时提取各仓库 src 内的 view 文件进行打包,可以这么理解吧
|
|
10
fox2081 2022-03-23 12:03:21 +08:00
@retrocode 准确说是预编译，只是统一工具链，而不是一次性打包全部，各自打包，只要提供最终生成的 cjs 或者 esm 就行，统一打包路径什么都是问题，而且代码膨胀之后打包性能会很差
|
|
12
fox2081 2022-03-23 15:11:38 +08:00
@retrocode 没有写博客的习惯，都是凭着对这些的理解去做的，简单说就是每个模块功能项目都是个大号的组件库，你可以自己装个私有 npm ，我用的 docker 安装的 verdaccio ，然后 webpack 、rollup 、vite 之类的打包工具试着弄个组件库，demo 的话可以参考下流行的组件库，比如 element 、antd 、naive 等等，大多思想都是一样的。
最后，我觉得协同工作，尤其是跨团队的，一定要用上 TS ，能避免很多协作上的低级问题。 |
Select Language