脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → pnpm workspace管理monorepo

pnpm workspace管理monorepo项目使用过程详解

 更新时间：2023年10月16日 11:33:02   作者：观炎  
这篇文章主要为大家介绍了pnpm workspace管理monorepo项目使用过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

本文记录使用 monorepo 方案 pnpm workspace 的过程。

monorepo

首先要清楚，为什么要用到 monorepo？对于我来说，手上负责公司内部的多个项目，其中除了业务模块单独使用外，例如系统管理、中间库、工具等都是共用的。

而在开发的过程中，共用的模块想要添加或修改，为了保持多项目一致性，那么就需要不断地复制粘贴，这个过程不说有多繁琐，还有可能造成依赖错误。

为了解决这个问题，对比了 learn+yarn / npm 等方案后，决定采用 pnpm workspace 方案对项目进行管理。

下面将通过一个例子初步学会 pnpm workspace。

随便找个文件夹创建 workspace 项目

D: && cd project/monorepo
mkdir demo2 && cd demo2

新建 pnpm-workspace.yaml 文件并填入相关内容以启用 workspace

packages:
  - packages/*
  - apps/*
  - demo

首行 packages 代表 workspace 包，且该 workspace 由以下项目组成；而带有 - 前缀的字符串，代表项目目录，具体可通过 pnpm 官方文档查看

完善项目目录及包配置

现在的文件夹应当只有一个 pnpm-workspace.yaml 文件，接下来我们手动添加相关文件/文件夹和配置

新建相关文件夹

mkdir packages && cd packages
mkdir components utils hooks space-play
cd .. && mkdir apps && cd apps && mkdir play1

为文件夹新建 package.json 文件

// ./package.json
{
    "description": "A pnpm workspace example."
}
// ./packages/components/package.json
{
    "name": "@space-play/components",
    "version": "0.0.1"
}
// ./packages/utils/package.json
{
    "name": "@space-play/utils",
    "version": "0.0.1"
}
// ./packages/hooks/package.json
{
    "name": "@space-play/hooks",
    "version": "0.0.1"
}
// ./packages/space-play/package.json
{
    "name": "space-play",
    "version": "0.0.1"
}
// ./apps/play1/package.json
{
    "name": "play1",
    "version": "0.0.1"
}

可以从上面的内容中看出， packages 文件夹里面除了 space-play 的 package.json 文件，其他文件夹里面的 name 命名都带有一个 @space-play 前缀，那么这个是什么意思呢？这是代表 npm 发包后的安装命名，也代表这些包都归属于 space-play 包。

此时的项目目录应该是这样的：

demo2
|    apps
|        play1
|            package.json
|    packages
|        components
|            package.json
|        hooks
|            package.json
|        utils
|            package.json
|        space-play
|            package.json
|    pnpm-workspace.yaml
|    package.json

一个简陋的 monorepo 已经完成，通过相关 pnpm add 指令，我们可以进行本地包的调用。

例如我们想要在 apps/play1 包里调用所有的本地包，可以先在 space-play 包里安装其它本地包，再安装该包行。

尝试一下：

在 workspace 里查找 packages/space-play，并在该包里安装 @space-play/components @space-play/hooks @space-play/utils 等依赖包

pnpm -r --filter ./packages/space-play add @space-play/components @space-play/hooks @space-play/utils

在 space-play 新建 index.ts 文件夹并导出所有依赖包

// packages/space-play/index.ts
import type { App } from 'vue'
export * from '@space-play/components'
export * from '@space-play/hooks'
export * from '@space-play/utils'
export default {
    install(app: App) {
        console.log('已使用 space-play 包，但该包里什么都没有')
    },
    version: '0.0.1' // 这里只是作为示例，实际应该获取 package.json 里的版本
}

到 apps/play1 里使用 space-play 包

pnpm -r --filter ./apps/play1 add space-play

在 apps/play1 新建一个简单的项目结构并安装相关依赖

demo1/apps/play1
|    app.vue
|    index.html
|    index.ts
|    package.json
|    vite.config.ts

可以看到，这个项目里面用到 vue、vite，这两个依赖在 monorepo 里面的其它项目包里都会用到，所以我们在根目录里面进行安装，同时安装 vite 解析 vue 的插件

pnpm add -w vue
pnpm add -w -D vite @vitejs/plugin-vue

可以看到这里用了两条命令并在第二条命令中多了个 -D 参数，因为 vite 在编译后不需要，而 vue 是需要的，所以一个安装在常用依赖，一个开发依赖

打开 ./apps/play1/package.json，对他加点料，文件内原本的参数不动，这里只显示添加的，后续也如此

{
    ...,
    "scripts": {
        "dev": "vite"
    }
}

文件 app.vue 和 index.html

<!-- app.vue -->
<template>
  <div>打开了 app.vue</div>
</template>

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.ts"></script>
  </body>
</html>

文件 apps/play1/index.ts 和普通 vue 项目的 main.ts 基本一致

import { createApp } from 'vue'
import SpacePlay from 'space-play'
import App from './app.vue'
createApp(App).use(SpacePlay).mount('#app')

文件 apps/play1/vite.config.ts 和普通 vue 项目的 main.ts 基本一致

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
});

到这里，一个基于 pnpm workspace 的 monorepo 项目基本完成，剩下的不过是在该项目内的填充。

注意！项目目前还不能够正常运行，因为在 packages/components packages/hooks packages/utils 还没有新建 index.ts 文件并这这些目录下的 package.json 配置 main 入口

如果你在上面过程中发现了这个问题并手动创建并配置了，那么完成根目录的 scripts 配置后就可以运行项目试试效果了。

{
    ...,
    "scripts": {
        "play1": "pnpm -C apps/play1 dev"
    }
}
pnpm run play1
 ?  Local:   http://localhost:5173/

通过浏览器打开，我们可以看到页面显示符合预期的内容

pnpm workspace - 传送门

以上就是pnpm workspace管理monorepo项目使用过程详解的详细内容，更多关于pnpm workspace管理monorepo的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 详解nodeJS之路径PATH模块

    详解nodeJS之路径PATH模块

    本篇文章主要介绍了详解nodeJS之路径PATH模块 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Nodejs高并发原理示例详解

    Nodejs高并发原理示例详解

    这篇文章主要为大家介绍了Nodejs高并发原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 基于NodeJS的前后端分离的思考与实践（五）多终端适配

    基于NodeJS的前后端分离的思考与实践（五）多终端适配

    对比基于浏览器的响应式设计方案，因为绝大部分终端探测和渲染逻辑迁移到了服务端，所以在 NodeJS 层进行适配无疑带来了更好的性能和用户体验；另外，相对于一些所谓的「云适配」方案带来的转换质量问题，在基于前后端分离的「定制式」方案中也不会存在。
    2014-09-09
  • Node.js对MongoDB进行增删改查操作的实例代码

    Node.js对MongoDB进行增删改查操作的实例代码

    这篇文章主要介绍了Node.js对MongoDB进行增删改查操作 ,需要的朋友可以参考下
    2019-04-04
  • nodejs中密码加密处理操作详解

    nodejs中密码加密处理操作详解

    这篇文章主要介绍了nodejs中密码加密处理操作,结合实例形式分析了nodejs针对用户登陆密码的加密处理操作相关实现技巧与注意事项,需要的朋友可以参考下
    2018-03-03
  • node.js中的console.time方法使用说明

    node.js中的console.time方法使用说明

    这篇文章主要介绍了node.js中的console.time方法使用说明,本文介绍了console.time的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • node.js使用express-jwt报错:expressJWT is not a function解决

    node.js使用express-jwt报错:expressJWT is not a function解决

    这篇文章主要给大家介绍了关于node.js使用express-jwt报错:expressJWT is not a function解决的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • node事件循环中事件执行的顺序

    node事件循环中事件执行的顺序

    在浏览器环境下我们的js有一套自己的事件循环，同样在node环境下也有一套类似的事件循环。本文就详细的来介绍一下，感兴趣的可以了解一下
    2021-08-08
  • Nodejs初级阶段之express

    Nodejs初级阶段之express

    这篇文章主要介绍了Nodejs初级阶段之express的相关资料,需要的朋友可以参考下
    2015-11-11
  • node.js基于fs模块对系统文件及目录进行读写操作的方法详解

    node.js基于fs模块对系统文件及目录进行读写操作的方法详解

    这篇文章主要介绍了node.js基于fs模块对系统文件及目录进行读写操作的方法,结合实例形式分析了nodejs使用fs模块针对文件与目录的读写、创建、删除等相关操作技巧,需要的朋友可以参考下
    2017-11-11

最新评论