Monorepo学习笔记

使用 pnpm 配置 monorepo

1、创建项目

mkdir stars-ui && cd stars-ui && pnpm init
mkdir packages docs

2、.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

{"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

packages:- "packages/*"- "docs"- "play"

5、初始化

5.1、docs

pnpm init

docs的package.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

for i in components hooks stars-ui themes utils; domkdir $i && cd $ipnpm initcd ..
done

components、hooks、themes、utils的package.json如下

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

stars-ui的package.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

# 根目录执行
pnpm create vite play -template vue-ts

play的package.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、根目录依赖

pnpm add -Dw vite
pnpm add -Dw typescript

pnpm add -w vue
pnpm add -w lodash-es

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

{"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

{"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依赖

{"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"}
}