V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yantianqi
V2EX  ›  程序员

想问下前端架构方案

  •  
  •   yantianqi · 2020-04-22 15:46:54 +08:00 · 1945 次点击
    这是一个创建于 1672 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想问下,目前前端架构方案

    • 项目 A 引用包 1
    • 项目 B 引用包 1

    1 、包 1 发布 npm,每次都要更新项目 A,B,而且安装在 node_modules 中没有热更新,感觉不太方便。

    2 、最近了解到 lerna,把项目 A 和包 1 作为一个整体的项目,包 1 内容修改后,在项目 B 中好像不能同步更新

    不知道有什么比较好对于多个项目,公用同一个包的方案

    6 条回复    2020-04-24 21:06:17 +08:00
    KuroNekoFan
        1
    KuroNekoFan  
       2020-04-22 15:51:13 +08:00
    lerna 就是 monorepo 的一个实现嘛,其实 monorepo 主要的问题在于如何进行粒度合适的发布了,只从开发角度说肯定比 multirepo 要方便一些
    faceRollingKB
        2
    faceRollingKB  
       2020-04-22 15:53:39 +08:00   ❤️ 1
    别的框架不清楚,angular 的话使用 library 可以解决,https://angular.io/guide/creating-libraries

    自己组织架构的话可以参考这里面用到的 npm 本地包的配置( https://docs.npmjs.com/cli/link),使用 npm link 链接 library 项目而不是 node_modules
    yhxx
        3
    yhxx  
       2020-04-22 15:54:18 +08:00
    webpack5 的联合模块可以看一下
    可以一定程度上缓解这个问题
    baxtergu
        4
    baxtergu  
       2020-04-22 16:36:24 +08:00
    把包 1 单独部署成 umd 的版本,然后 A B 两个项目 external 这个包用 umd 方式引入,就可以实现包 1 在线版本更新后 A 和 B 不用重新编译部署,但是需要注意浏览器的缓存策略。
    SilentDepth
        5
    SilentDepth  
       2020-04-22 18:12:48 +08:00
    如果接受包 1 更新后重新编译两个项目,npm link 或 yarn workspaces 可解(两个项目引用包 1 的同一个源码副本)。

    如果希望两个项目什么都不用做就能获得包 1 的更新,考虑 @baxtergu #4 的方案吧。
    1340641314
        6
    1340641314  
       2020-04-24 21:06:17 +08:00
    如果是本地开发的话,可以了解一下: https://www.npmjs.com/package/@fmfe/psync

    指定
    psync --dir=指定你 A 项目的目录 --dir=指定你 B 项目的目录 --dir=指定你其它使用的项目目录
    程序会自动识别依赖关系,进行文件同步,不过笔记可惜的是,目前只支持 mac
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1919 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:28 · PVG 00:28 · LAX 08:28 · JFK 11:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.