pnpm + monorepo架构思想小试牛刀

写在前面

什么是monorepo架构，他解决了一个什么问题

怎么设计一个monorepo架构

初始化一个package.json

pnpm init

创建一个pnpm-workspace.yaml文件/配置文件内容

touch pnpm-workspace.yaml
// 内容
packages:
  # 前端项目储存的地方
  - 'projects/*'
  # 所有组件存储的地方
  - 'components/**'
  # 所有的方法 
  - 'api/**'

新建一个组件库的文件夹/初始化对应的操作

mkdir components
// 初始化package.json
pnpm init 
// 新建一个组件
cd components 
touch Button.vue

components/Button.vue内容

<!--
 * @use: 
 * @description: 
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2023-06-16 11:25:31
 * @FilePath: /monorepoDemo/componrnts/modules/Button.vue
-->
<template>
  <div>
    <button>THIS IS PUBLIC BUTTON</button>
  </div>
</template>
<script></script>
<style></style>

components/package.json 内容

{
  "name": "@lm/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private" : true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

• 说明： 这里的name可以随便起，但是最好是起一个有意义的名字，有利于后面我们进行安装该组件

新建一个projects文件夹/初始化一个vite项目

mkdir projects
// 进入到projects
cd projects
// 初始化一个vite项目
pnpm create vite
// 进入到项目(假设你起的项目名字是webOne)
cd webOne
// 安装依赖
pnpm i
// 启动项目
pnpm run dev

在projects文件夹下面另外初始化一个vite项目（和webOne同级目录）

// 初始化一个vite项目
pnpm create vite
// 进入到项目(假设你起的项目名字是webtwo)
cd webtwo
// 安装依赖
pnpm i
// 启动项目
pnpm run dev

• 这样的目的是为了模拟多项目共用一个组件做的准备，当然你一个项目也是可以的

分别在webOne 和 webtwo项目中安装上面已经创建好的组件

pmpm install @lm/components

分别在webOne 和webtwo项目中引入该组件

<!--
 * @use: 
 * @description: webOne 和 webtwo 项目中 App.vue
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2023-06-16 11:29:30
 * @FilePath: /monorepoDemo/projects/webOne/src/App.vue
-->
<script setup>
import Button from '@lm/components'
</script>

<template>
 <Button/>
</template>

<style scoped>
</style>

• 这样就达到了不同项目使用相同组件的功能，基本的架构就完成了，后面添加api的话，就继续新建一个api的文件夹，工具类的就新建一个utils的文件夹即可，这个按照实际需求进行架构的设计，截图看一下总的文件目录吧

怎么运行项目

pnpm run build