前言

前端多个包管理的的方式一般都是采用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. Mac下最好用的SSH连接客户端 (Termius)

    Termius是微软的一款SSH终端工具,它支持多平台.而且操作界面十分ha好看且简洁,今天分享给大家️ 软件下载 关注下方公众号,回复termius获取下载地址   软件功能介绍 Termius M ...

  2. 论文解读(SUBLIME)《Towards Unsupervised Deep Graph Structure Learning》

    论文信息 论文标题:Towards Unsupervised Deep Graph Structure Learning论文作者:Yixin Liu, Yu Zheng, Daokun Zhang, ...

  3. 【Java面试】请说一下Mysql索引的优点和缺点?

    今天分享的这道面试题,让一个工作4年的小伙子去大众点评拿了60W年薪. 这道面试题是: "请你说一下Mysql索引的优点和缺点" 关于这道题,看看普通人和高手的回答 普通人: 嗯. ...

  4. np.linspace,numpy中的linspace()

    import numpy as np x=np.linspace(1,10) y=np.linspace(1,10,num=10,retstep=True)#num可省略 print(x) print ...

  5. python爬虫之JS逆向

    Python爬虫之JS逆向案例 由于在爬取数据时,遇到请求头限制属性为动态生成,现将解决方式整理如下: JS逆向有两种思路: 一种是整理出js文件在Python中直接使用execjs调用js文件(可见 ...

  6. 测试人生 | 薪资翻倍涨至50W是种什么样的体验?

    本文为霍格沃兹测试开发学社优秀学员跳槽笔记,测试开发进阶学习文末加群. 本人已经工作7年了,做的都是功能测试以及写一些简单的自动化脚本,加上之前没有学习的意识,导致专业技术水平与工作年限不匹配,在上家 ...

  7. H2-Table CATALOGS not found

    在使用 IntelliJ IDEA 2021.1.3 版本,使用默认配置连接 H2 数据库的时候,出现下面错误,项目里 H2 使用的版本为 2.0.202 . [42S02][42102] org.h ...

  8. mac M1 php扩展 xlswriter 编译安装爬坑记录

    电脑配置 MacBook Pro(14英寸,2021年) 系统版本 macOS Monterey 12.4 芯片 Apple M1 Pro PHP环境 MAMP Pro Version 6.6.1 ( ...

  9. SAP 文本框多行输入

    REPORT zjw_test01. CONSTANTS: gc_text_line_length TYPE i VALUE 72. TYPES: text_table_type(gc_text_li ...

  10. Docker部署jar包运行

    1.上传jar包到服务器 2.在该目录下创建Dockerfile 文件 vi Dockerfile 3.然后将下面的内容复制到Dockerfile文件中 FROM java:8 MAINTAINER ...