最近实践了微前端,写了个 blog 总结下 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
MorningStar0
V2EX    程序员

最近实践了微前端,写了个 blog 总结下

  •  1
     
  •   MorningStar0 2023-01-13 09:05:16 +08:00 5710 次点击
    这是一个创建于 1006 天前的主题,其中的信息可能已经有所发展或是发生改变。

    示例项目的微前端迁移(仓库的 micro-front 分支)已完成:

    • 目录结构重构
    • 公共 module 引用抽离
    • 公共 module 统一构建
    • 公共 deps 抽离
    • 公共依赖版本控制

    blog 地址

    第 1 条附言    2023-01-13 10:53:07 +08:00
    老铁们来点意见,交流交流
    第 2 条附言    2023-01-13 19:18:59 +08:00
    解释好累。我寻思整篇 blog 也没说这就是全部啊,不管是标题还是副标题,这不都表示这是一部分?大标题那里明显带着 "-1"。
    而且评论这么问,让我觉得他们的微前端项目看起来不包含我提的这部分。可以理解,毕竟有可能他们是直接启动一个微前端项目,而不是我这样的迁移。
    29 条回复    2023-01-15 02:29:47 +08:00
    Azuer
        1
    Azuer  
       2023-01-13 10:58:14 +08:00   3
    微前端是个什么概念?
    hucw21750
        2
    hucw21750  
       2023-01-13 11:03:48 +08:00
    我们公司产品后台管理应用已成为巨石应用,一直想搞微前端分解下业务,奈何人力时间都不足,都是在脑海中实践。
    musi
        3
    musi  
       2023-01-13 11:07:53 +08:00
    “你可能并不需要微前端”
    musi
        4
    musi  
       2023-01-13 11:10:05 +08:00
    @musi #3 仔细看了一下就是 monorepo ,不是前端吹的微前端
    lrwlf
        5
    lrwlf  
       2023-01-13 11:11:27 +08:00
    你说的这几点不是大仓吗,跟微前端有什么关系么
    horizon
        6
    horizon      2023-01-13 11:12:31 +08:00
    我也不懂什么是微前端。。
    MorningStar0
        7
    MorningStar0  
    OP
       2023-01-13 11:15:53 +08:00
    @lrwlf
    @musi
    这里就是第一步拆分依赖和公共包,后续计划会完成组件的独立开发,让组件可以通过网络在运行时加载
    musi
        8
    musi  
       2023-01-13 11:18:08 +08:00
    @MorningStar0 #7 你这微前端的部分都还没开始怎么就开始吹微前端了,还有现在微前端已经玩烂了,阿里又开始说“你可能并不需要微前端”了
    MorningStar0
        9
    MorningStar0  
    OP
       2023-01-13 11:21:50 +08:00
    @musi 呃我理解,微前端也包含我提到的这部分吧,而且我就是记录下自己实践的部分,blog 中提到的后续计划,已经在开发中了。
    通过网络动态引用的部分已经完成了,只是其他计划还没有完成,我觉得不适合单独写一个专题。
    动态引用的代码,在仓库中的 dynamic-import module 中
    lrwlf
        10
    lrwlf  
       2023-01-13 11:25:29 +08:00
    @MorningStar0 似乎不是想要像传统“微前端”那样拆分子应用,而是更细化到组件和 SDK 。有点像“模块联邦”,可以参考 https://tnfe.github.io/hel/
    musi
        11
    musi  
       2023-01-13 11:25:35 +08:00
    @MorningStar0 #9 现在市面上的为前端框架重点除了是远端加载更重要的是代码隔离,让远端的代码运行在一个沙箱环境之中,这个基本上是工作量的大头,远端加载的话其实是比较简单的
    MorningStar0
        12
    MorningStar0  
    OP
       2023-01-13 11:26:13 +08:00
    @MorningStar0 #9 至于微前端玩烂了,还有 ali 的技术观点,其实不太影响我。总的来说 我的需求对于微前端时刚需,这点是指我在 blog 中提到的
    “对于不同用户,同一个包需要在运行时 提供不同的版本”。
    yaphets666
        13
    yaphets666  
       2023-01-13 11:27:20 +08:00
    @musi 远端代码运行在沙箱是什么意思?前端代码都是运行在浏览器啊
    musi
        14
    musi  
       2023-01-13 11:29:14 +08:00
    @yaphets666 #13 就是在浏览器里面构建了一个 js 沙箱,去运行不受信的代码,或者说不能对主应用造成干扰
    MorningStar0
        15
    MorningStar0  
    OP
       2023-01-13 11:30:09 +08:00
    @musi 沙箱还是需要的,我这里目前的方案是,将通过 new Function 加载的远程库,把它的 context 绑定到一个 object 下,这个 object 提供了一些允许调用全局变量。
    MorningStar0
        16
    MorningStar0  
    OP
       2023-01-13 11:31:39 +08:00
    @lrwlf 可能我这个 blog 中给出的例子确实更像模块联邦
    yikyo
        17
    yikyo  
       2023-01-13 11:32:04 +08:00
    @yaphets666 微应用级别的隔离,防止几个微应用间冲突。沙箱的话,核心代码只有几行,你可以看一下 神光的编辑秘籍 近期那篇微前端方案那篇文章
    zhaol
        18
    zhaol  
       2023-01-13 11:56:56 +08:00
    微前端最大的问题就是信息传递,贼麻烦,真的。应用一但多起来,共享状态的管理真的很麻烦,debug 的时候也很头疼。主应用和微应用以及不同微应用之间的交互也麻烦,能别微前端就别微前端。不过学学技术可以,业务中尽量少用
    MorningStar0
        19
    MorningStar0  
    OP
       2023-01-13 12:02:00 +08:00
    @zhaol 确实比较麻烦,我的解决方案是将带有 context 的功能,作为单独的 module 打包,然后在构建的时候,保持这个 context 的唯一实例。
    alexsunxl
        20
    alexsunxl  
       2023-01-13 12:24:52 +08:00
    你这个理解的微前端是不是有点问题。你这属于是组件优化层面。
    不是说 monorepo 就是微前端。
    微前端并不是解决 项目大的问题啊。
    我理解的微前端和微服务的核心关键词都是一个: 技术栈无关。

    你得把 vue2 ,vue3 ,angular ,react ,原生 js 通过路由层能揉在一起的才叫微前端。
    微服务也一样的。每个团队能选自己的技术栈( go ,java,python...)和框架,最后只要按规范接入平台作为一个完成服务就行。
    alexsunxl
        21
    alexsunxl  
       2023-01-13 12:26:12 +08:00
    @musi #4 统一,就是 monorepo 和组件优化。
    你瞅瞅我 20 楼的。
    我觉得楼主没有理解 技术栈无关这个核心概念。
    alexsunxl
        22
    alexsunxl  
       2023-01-13 12:26:38 +08:00
    统一 -> 同意
    MorningStar0
        23
    MorningStar0  
    OP
       2023-01-13 12:45:01 +08:00
    @alexsunxl 这里源引 https://micro-frontends.org/来解释下。
    > Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.
    翻译:微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
    我可能更侧重独立发布功能和#12 中提到的需求
    MorningStar0
        24
    MorningStar0  
    OP
       2023-01-13 12:48:24 +08:00
    @MorningStar0
    @alexsunxl
    这不意味着我否定技术栈无关这点,但我确实不想引入其他技术栈。虽然这在我通过#15 层提供的沙箱方案可以解决。
    并且我觉得不一定要严格要求通过 **路由层** 解决 collection 的问题。
    anonymous2351d00
        25
    anonymous2351d00  
       2023-01-13 16:52:29 +08:00
    微前端在 Angular 中的应用
    https://github.com/worktile/ngx-planet
    weijiagege
        26
    weijiagege  
       2023-01-13 16:56:20 +08:00
    这不是 monorepo 前端实践吗,怎么就成微前端了
    corianderHunter
        27
    corianderHunter  
       2023-01-13 17:48:16 +08:00
    这是哪门子微前端,而且感觉完全没必要用 monorepo ,应该是构建优化。
    MorningStar0
        28
    MorningStar0  
    OP
       2023-01-13 19:25:41 +08:00
    @weijiagege
    @corianderHunter
    一个问题,你们的微前端项目不包括 monorepo 么?也不包括构建方式更改?
    而且标题这里的 “从 CRA 将 react 项目迁移成微前端项目-1” 和副标题这里的 “从 CRA 将 react 项目迁移成微前端项目 目录结构的确定和构建方式的更改”,这俩说明不了这篇是主要讲目录结构和构建更改的吗?

    然后这个主题提到的 “在主项目中引用抽离的项目”,引用子应用的方式,包括我在#15 、#9 的回复,应该不难看出这个项目拆分完成的结果吧
    IvanLi127
        29
    IvanLi127  
       2023-01-15 02:29:47 +08:00 via iPad
    这内容确实和微前端没啥关系。。。另外我感觉微前端是个伪概念。。。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     895 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 31ms UTC 20:48 PVG 04:48 LAX 13:48 JFK 16:48
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86