目前公司需要开一个新项目,预计会分多个模块,部分外包,部分自行消化,由于是个聚合系统,会对接多方接口.
预计到人员嘈杂到时候在开发时会有很大的冲突,后端还好微服务独立部署问题不大,前端由于是一个统一的后台,并行开发的模块光提交造成的冲突可能就会很多,需要提前准备一个协同方案.
哪种设计更合理可减少协同冲突? 前端微服务是否是一个可行的方案? 或者大家公司是否有类似的经验可以让我参考下?
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 ,能避免很多协作上的低级问题。 |