前言

前端多个包管理的的方式一般都是采用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. 羽夏笔记—— AT&T 与 GCC

    写在前面   本文是本人根据<AT&T 汇编语言与 GCC 内嵌汇编简介>进一步整理,修改了一些错误,并删除我并不能复现代码相关的部分.该文章一是我对 AT&T 的学习记录 ...

  2. vuex+Es6语法补充-Promise

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用 集中式存储管理 单页面的状态管理/多页面状态管理 使用步骤: // 1.导入 import Vuex from 'vuex' // ...

  3. 从单例谈double-check必要性,多种单例各取所需

    theme: fancy 前言 前面铺掉了那么多都是在讲原则,讲图例.很多同学可能都觉得和设计模式不是很搭边.虽说设计模式也是理论的东西,但是设计原则可能对我们理解而言更加的抽象.不过好在原则东西不是 ...

  4. python创建分类器小结

    简介:分类是指利用数据的特性将其分成若干类型的过程. 监督学习分类器就是用带标记的训练数据建立一个模型,然后对未知数据进行分类. 一.简单分类器 首先,用numpy创建一些基本的数据,我们创建了8个点 ...

  5. 南京大学 静态软件分析(static program analyzes)-- introduction 学习笔记

    一.Programming Languages体系 静态程序分析是编程语言中应用层面下的一个细分领域,它是一个非常重要的核心内容. 在理论部分,考虑的是如何设计一个语言的语法和语义,如何设计语言的类型 ...

  6. 【前端面试】(三)JavaScript相等(==)和全等(===)运算符的区别

    视频链接: JavaScript相等()和全等(=)运算符的区别 - Web前端工程师面试题讲解 参考链接: JavaScript == 与 === 区别 区别 对于string.number 等基础 ...

  7. 神经网络可视化《Grad-CAM:Visual Explanations from Deep Networks via Gradient-based Localization》

    神经网络已经在很多场景下表现出了很好的识别能力,但是缺乏解释性一直所为人诟病.<Grad-CAM:Visual Explanations from Deep Networks via Gradi ...

  8. 如何等待ajax完成再执行相应操作

    ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用. 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作. / ...

  9. 常用的Linux命令和Git的必要配置

    常用的Linux命令平时一定要多使用这些基础的命令! 1.cd : 改变目录. 2.cd . . 回退到上一个目录,直接cd进入默认目录 3.pwd : 显示当前所在的目录路径. 4.ls(ll): ...

  10. 正睿七连测 DAY5 T2

    题是水题,也不难想,本来是想打暴力先过个小数据, 本来就想再搞搞优化试试能不能过,毕竟这个题理论上 O( $n^2$ ) 是能过的 题干 主要是觉得这个优化很有可取之处,本来超时,一加这个优化就好很多 ...