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

多个前端小项目,怎么让基础代码复用啊,每一个项目都是通过 vue-cli 脚手架生成的

  •  
  •   darknoll · 2020-08-12 09:11:19 +08:00 · 4609 次点击
    这是一个创建于 1555 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司原项目都是 C++做的,现在打算把其中的一些功能分拆成一个个独立的 web 应用,领导要求这些应用可以单独部署或者选择其中几个部署。

    25 条回复    2020-08-13 07:33:11 +08:00
    ByZHkc3
        1
    ByZHkc3  
       2020-08-12 09:12:31 +08:00
    组件库啊
    doommm
        2
    doommm  
       2020-08-12 09:17:17 +08:00 via Android
    基础代码指是什么代码?是基础组件还是项目模板?
    fengxianqi
        3
    fengxianqi  
       2020-08-12 09:17:20 +08:00
    把公共的抽到一处,发布到 npm 私服,每个独立应用安装这个依赖就可以了吧。
    darknoll
        4
    darknoll  
    OP
       2020-08-12 09:21:55 +08:00
    @doommm 就是几个项目中都用到的 vue 组件啊,函数啊啥的
    VDimos
        5
    VDimos  
       2020-08-12 09:23:59 +08:00 via Android
    git clone,简单粗暴
    clf
        6
    clf  
       2020-08-12 09:26:07 +08:00
    不知道我理解的对不对:现在有 N 个单页面项目,然后需求是可以选择 1 个或多个部署。基础代码指的是这些单页面项目。

    一个简单的方案:
    1.把所有的页面都合并到一个项目里
    2.写一个类似导航的页面,当需要部署多个的时候启用导航页作为首页,如果只部署一个,那么那个页面的入口 Vue 文件就是首页。
    3.采用前端路由控制页面的可见性,用到的页面配置到路由里,没用到的就不配置。
    darknoll
        7
    darknoll  
    OP
       2020-08-12 09:28:32 +08:00
    @lychs1998 每个项目的域名都不一样,没法做到一个项目里啊
    Mindjet
        8
    Mindjet  
       2020-08-12 09:28:57 +08:00   ❤️ 2
    建议阅读 JavaScript Web 应用开发(Nicolas_Bevacqua),适合你的需求,前言部分摘录如下:

    **《 JavaScript Web 应用开发》这本书会告诉你如何在前端开发中使用自动化技术,涵盖你所需要知道的一切,比如说如何避免重复的任务,如何使用简洁的工具监控生产版本,减少人为错误造成的损失。**

    ...

    **模块化至关重要,能协助我们构建可伸缩且可维护的应用。模块化不仅能确保应用的各个部分都能轻易地加以测试,容易编写文档,而且还能鼓励我们重用代码,并把精力集中在提高代码质量上。**

    在这本书中,Nico 熟练地示范了如何编写**模块化**的 JavaScript 组件,如何正确处理异步流,还介绍了足够你用来构建应用的客户端 MVC 知识。
    Mindjet
        9
    Mindjet  
       2020-08-12 09:30:39 +08:00   ❤️ 1
    JavaScript 的面向对象和模块化和 C++/Java/C#等等语言差别很大,需要用心学习。
    JavaScript 入门容易,精通就没那么容易了。
    wenzichel
        10
    wenzichel  
       2020-08-12 09:36:31 +08:00
    抽离出来,发布成 Npm 包,每个项目可以单独引用。如果稍微大点的,可以单独发布;几个代码都比较小,可以合到一起,https://github.com/wenzi0github/utils 例如这个里面,有很多小的实用的片段。
    sixway
        11
    sixway  
       2020-08-12 09:39:03 +08:00
    函数工具库可以参考 lodash 的实现,至于可以复用的组件可以单独模块化,其他的项目直接引用即可。
    otakustay
        12
    otakustay  
       2020-08-12 09:58:27 +08:00   ❤️ 2
    monorepo 万能论:都放一起
    azcvcza
        13
    azcvcza  
       2020-08-12 10:04:54 +08:00
    搞一个 base_modules 单独维护组件库,每个项目依赖同一个 base _modules
    DL9412
        14
    DL9412  
       2020-08-12 10:22:39 +08:00
    听起来类似微前端架构?之前看过一点,没实践过。可以看下 https://github.com/phodal/microfrontends
    maguowei
        15
    maguowei  
       2020-08-12 10:28:28 +08:00
    yunkou
        16
    yunkou  
       2020-08-12 10:48:08 +08:00
    发布到 npm 私服 如果没有什么安全问题的话,直接发 npm
    no1xsyzy
        17
    no1xsyzy  
       2020-08-12 10:51:55 +08:00
    git submodule (
    vue-cli 我记得可以指定模板从哪个 git repo 取的吧…… 记错勿怪
    BaiLinfeng
        18
    BaiLinfeng  
       2020-08-12 11:04:24 +08:00
    @wenzichel 这是什么啊要咋使用
    KuroNekoFan
        19
    KuroNekoFan  
       2020-08-12 11:13:52 +08:00
    monorepo
    Sapp
        20
    Sapp  
       2020-08-12 11:35:01 +08:00
    你连 npm 都不用上传,抽成一个合集直接 git 地址引用就可以了,比如:npm i -D git+xxx 。当然你也可以尝试在一个脚手架里搞多个项目,这样抽都不用抽了
    phobal
        21
    phobal  
       2020-08-12 12:52:14 +08:00
    公用的函数方法比较简单,你可以把他们抽离出来发布成 npm 包。
    组件的话要看你的组件是基础组件还是业务组件,基础组件的话就发布成 npm 包,如果是业务组件的话可以尝试将他们做成物料库。可以参考 https://ice.work/docs/materials/about

    如果不想发布成 npm 包可以参考楼上几位说的,git submodules 、monorepo 都可以实现。

    另外也可以考虑使用 微前端 的方案,比如使用: https://github.com/umijs/qiankun
    gouflv
        22
    gouflv  
       2020-08-12 13:47:02 +08:00 via iPhone
    npm package > git subtree/module
    PainAndLove
        23
    PainAndLove  
       2020-08-12 13:54:23 +08:00
    mono-repo 了解一下
    nagisme
        24
    nagisme  
       2020-08-12 18:14:31 +08:00
    mono 或者私有 npm
    iamobj
        25
    iamobj  
       2020-08-13 07:33:11 +08:00 via iPhone
    可以用 lerna
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2596 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:01 · PVG 00:01 · LAX 08:01 · JFK 11:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.