前言

前端多个包管理的的方式一般都是采用monorepo的方式去管理,之前都是使用的lerna的workspace去管理。这段时间包管理切换到了pnpm上,它也有worksapce,可以支持monorepo

monorepo

有的小伙伴可能对monorepo不太了解,我们简单说下:

Monorepo的意思是在版本控制系统的单个代码库里包含了许多项目的代码。这些项目虽然有可能是相关的,但通常在逻辑上是独立的,并由不同的团队维护。

在前端使用角度来看,monorepo 就是把多个工程放到一个 git 仓库中进行管理,因此他们可以共享同一套构建流程、代码规范也可以做到统一,特别是如果存在模块间的相互引用的情况,查看代码、修改bug、调试等会更加方便。

pnpm+workspace

pnpm在这里我们就不过多介绍,有不了解的小伙伴,可以看下官网pnpm.

创建项目
  1. 建一个项目目录,创建好目录执行pnpm init,会在根目录生成一个packaeg.json文件。

2.创建 pnpm-workspace.yaml.npmrc文件

  • pnpm-workspace.yaml

    • 定义了 工作空间 的根目录,并能够使您从工作空间中包含 / 排除目录 。 默认情况下,包含所有子目录。即使使用了自定义目录位置通配符,根目录下的package目录也总是被包含.
  • .npmrc

    • pnpm 从命令行、环境变量和 .npmrc 文件中获取其配置。

    • pnpm config 命令可用于更新和编辑 用户和全局 .npmrc 文件的内容。

      四个相关文件分别为:

      • 每个项目的配置文件(/path/to/my/project/.npmrc
      • 每个工作区的配置文件(包含 pnpm-workspace.yaml 文件的目录)
      • 每位用户的配置文件( ~/.npmrc )
      • 全局配置文件( /etc/npmrc )

      所有 .npmrc 文件都遵循 INI-formatted 列表,包含 key = value 参数。

在这里,我们在.npmrc文件配置了,engine-strict=true 结合根目录的package.json中的 engines 字段,可以指定运行的 node 版和 pnpm 版

  1. 创建packages文件夹,进入目录创建我们子项目,
  • lowcode-platform 采用umi创建,感兴趣的可以自行去umi官网查看
  • ui-material 采用阿里的低代码物料脚手架创建,感兴趣的可以去看lowcode-engine
  1. 我们假设把ui-material项目作为基础库,让lowcode-platform去直接引用ui-material库,

    我们可以在根目录执行 pnpm add ui-material -r --filter lowcode-platform

    执行完成之后,我们就可以在lowcode-platform项目下直接引用改模块,不需要安装。这里我们用到了三个命令,分别是add,-r,--filter。具体详细内容可以参考官网。

5.接下来,我们可以在根目录下执行下pnpm i安装下依赖,配置下启动脚本

"clean-install": "pnpm clean && rm -rf ./{packages}/*/node_modules node_modules && pnpm i",
"dev": "pnpm -F \"lowcode-platform\" dev",
"build": "pnpm -F \"lowcode-platform\" build",
"dev:ui": "pnpm -F \"ui-material\" lowcode:dev",
"build:ui": "pnpm -F \"ui-material\" lowcode:build",

到这里就可以了,你可以配置自己比较方便快捷的命令。

结束语

代码已上传的github,如有需要,可自行下载查看

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

pnpm 的 workspace 实现 monorepo 工程的更多相关文章

  1. eclipse 中添加工程 Some projects cannot be imported because they already exist in the workspace

    第一次从外部文件导入HelloWorld工程到workspace目录中,成功. 删除后,再次从外部导入workspace目录提示 Some projects cannot be imported be ...

  2. xcode4的workspace里各lib工程与app工程联编之runscript简介

    copy from:http://www.cnblogs.com/xiaouisme/archive/2012/02/06/2339470.html 本文讲解怎么在xcode4的workspace里配 ...

  3. 使用mono-repo实现跨项目组件共享

    本文会分享一个我在实际工作中遇到的案例,从最开始的需求分析到项目搭建,以及最后落地的架构的整个过程.最终实现的效果是使用mono-repo实现了跨项目的组件共享.在本文中你可以看到: 从接到需求到深入 ...

  4. iOS使用Workspace来管理多项目

    开发中会有一些常用的类或方法,或者是某个特定功能的,比如一个自定义的弹框.一个更容易使用的网络请求库,可以把它们放到一个单独的工程里,通过静态库(library.FrameWork)的方式应用到任何其 ...

  5. Android+clipse导入工程提示:invalid project description

    今天遇到一个奇怪的问题.一个android的工程用eclipse导入的时候,提示错误.错误为:invalid project description . details为xxxx project ov ...

  6. MyEclipse + Maven开发Web工程的详细配置过程

    好久没做Web方面的开发,今天突然想弄弄SpringMVC,因为不久前又学了点Maven觉得非常好,所以在弄SpringMVC这个Web框架时想使用Maven来做,但是问题又来了,我一直是在Eclip ...

  7. 53环境Jenkins新增工程配置

    1. 登录http://10.179.175.53:8080/环境. 2. 点击新建任务,输入任务名称,并在复制一个NOS的类似工程即可. 3. 在配置页面,修改源码地址: 4. 点击完成,执行构建, ...

  8. iOS使用Workspace来管理多项目 ( 转 )

    开发中会有一些常用的类或方法,或者是某个特定功能的,比如一个自定义的弹框.一个更容易使用的网络请求库,可以把它们放到一个单独的工程里,通过静态库(library.FrameWork)的方式应用到任何其 ...

  9. 迅为-IMX6开发板Android Eclipse 导入Led应用程序工程

    本小节给大家详细讲解如何导入 Android 应用的工程文件.先解压迅为“iTOP-IMX6-Android4.4-LED 测试程序 r”压缩包.如下图所示,解压出ledtest 文件夹.<ig ...

随机推荐

  1. elasticsearch-spark的用法

    Hadoop允许Elasticsearch在Spark中以两种方式使用:通过自2.1以来的原生RDD支持,或者通过自2.0以来的Map/Reduce桥接器.从5.0版本开始,elasticsearch ...

  2. 单例模式与pickle模块

    目录 设计模式之单例模式 pickle模块 设计模式之单例模式 设计模式是前辈们发明的经过反复验证用于解决固定问题的固定套路,在IT行业中设计模式总共有23种,可以分为三大类:创建型.结构型.行为型. ...

  3. SpringCloud 简介

    目录 什么是微服务? 初识 SpringCloud SpringCloud VS Dubbo 什么是微服务? <互联网系统架构演变> "微服务"一词源于 Martin ...

  4. 如何用 UDP 实现可靠传输?

    作者:小林coding 计算机八股文刷题网站:https://xiaolincoding.com 大家好,我是小林. 我记得之前在群里看到,有位读者字节一面的时候被问到:「如何基于 UDP 协议实现可 ...

  5. 使用PowerShell校验文件MD5

    更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年7月14日. 方法1:使用Get-FileHash命令 (Get-FileHash ".\SQLSer ...

  6. 部署ASP.NET Core最简单的办法,使用IIS部署ASP.NET Core应用

    本文迁移自Panda666原博客,原发布时间:2021年3月28日.写原文的时候.NET的最新版本是5.0,现在7的preview出来了,时间真快啊.抽空再写个在Windows Server Core ...

  7. springboot执行流程

    构造方法初始化,创建一个新的实例,这个应用程序的上下文要从指定的来源加载bean public SpringApplication(ResourceLoaderresourceLoader,Class ...

  8. cve_2019_0708_bluekeep漏洞

    一.环境说明 kali linux windows 7 sp1 二.cve_2019_0708_bluekeep漏洞利用 msf5 auxiliary(dos/windows/rdp/ms12_020 ...

  9. docker compose 部署 minio

    1.docker-compose.yaml 文件如下: version: '3' services: minio: image: minio/minio:latest # 原镜像`minio/mini ...

  10. StarGAN论文及代码理解

    StarGAN的引入是为了解决多领域间的转换问题的,之前的CycleGAN等只能解决两个领域之间的转换,那么对于含有C个领域转换而言,需要学习C*(C-1)个模型,但StarGAN仅需要学习一个,而且 ...