Monorepo学习笔记

Monorepo学习笔记

使用 pnpm 配置 monorepo

1、创建项目

shell 复制代码
mkdir stars-ui && cd stars-ui && pnpm init
mkdir packages docs

2、.gitignore

gitignore 复制代码
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

pnpm-lock.yaml

3、package.json

json 复制代码
{
  "name": "@xumeng03/monorepo",
  "private": "true",
  "description": "A Component Library for Vue 3",
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "engines": {
    "node": ">=18"
  }
}

4、pnpm-workspace.yaml

yaml 复制代码
packages:
  - "packages/*"
  - "docs"
  - "play"

5、初始化

5.1、docs

shell 复制代码
pnpm init

docspackage.json如下

json 复制代码
{
  "name": "docs",
  "private": "true",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5.2、packages

shell 复制代码
for i in components hooks stars-ui themes utils; do
    mkdir $i && cd $i
    pnpm init
    cd ..
done

componentshooksthemesutilspackage.json如下

json 复制代码
{
  "name": "@stars-ui/components",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

stars-uipackage.json如下

json 复制代码
{
  "name": "@xumeng03/stars-ui",
  "version": "1.0.0",
  "description": "A Component Library for Vue 3",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5.3、play

shell 复制代码
# 根目录执行
pnpm create vite play -template vue-ts

playpackage.json如下

json 复制代码
{
  "name": "play",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "typescript": "^5.5.3",
    "vite": "^5.4.1",
    "vue-tsc": "^2.0.29"
  }
}

6、依赖安装

6.1、根目录依赖

shell 复制代码
pnpm add -Dw vite
pnpm add -Dw typescript
shell 复制代码
pnpm add -w vue
pnpm add -w lodash-es

@xumeng03/stars-ui引入作为全局依赖

json 复制代码
{
  "name": "@xumeng03/monorepo",
  "private": "true",
  "description": "A Component Library for Vue 3",
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "engines": {
    "node": ">=18"
  },
  "devDependencies": {
    "typescript": "^5.5.3",
    "vite": "^5.4.1"
  },
  "dependencies": {
    "lodash-es": "^4.17.21",
    "vue": "^3.4.37",
    "@xumeng03/stars-ui": "workspace:*"
  },
  "workspaces": [
    "packages/*",
    "play",
    "docs"
  ]
}

6.2、docs依赖

按需求添加,我这里目前没有依赖需要安装

6.3、package子包依赖安装

按需求添加,我这里只是在@xumeng03/stars-ui里面引入@stars-ui/components、@stars-ui/hooks、@stars-ui/themes、@stars-ui/utils

json 复制代码
{
  "name": "@xumeng03/stars-ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@stars-ui/components": "workspace:*",
    "@stars-ui/hooks": "workspace:*",
    "@stars-ui/themes": "workspace:*",
    "@stars-ui/utils": "workspace:*"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

6.4、play依赖

json 复制代码
{
  "name": "play",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "typescript": "^5.5.3",
    "vite": "^5.4.1",
    "vue-tsc": "^2.0.29"
  }
}

6.5、安装依赖

shell 复制代码
pnpm install

6.6、测试Monorepo

shell 复制代码
cd play
pnpm run dev

7、发布

待补。。。

相关推荐
流氓也是种气质 _Cookie1 天前
从依赖地狱到依赖天堂PNPM
pnpm·monorepo
止观止4 天前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
就爱瞎逛24 天前
pnpm link如何不踩坑
pnpm·打包
努力了吗梁同学1 个月前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·vue·pnpm·nuxt·nuxtimg
小声读源码1 个月前
【技巧】dify前端源代码修改第一弹-增加tab页
前端·pnpm·next.js·dify
Wang's Blog1 个月前
Monorepo架构: 项目管理模式对比与考量
架构·monorepo
灿灿121382 个月前
npm、pnpm、yarn 各自优劣深度剖析
前端·javascript·npm·pnpm·yarn
wml000002 个月前
pnpm项目内网迁移
pnpm·离线
big tail2 个月前
项目依赖版本修改
npm·pnpm·react·yarn·依赖·package.json
青苔猿猿2 个月前
node版本.node版本、npm版本和pnpm版本对应
前端·npm·node.js·pnpm