简单带大家实践一下pnpm，也就几分钟的事情~ - 哈喽比特

1223次阅读 | 发布于2年以前

前言

大家好，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

Monorepo

说pnpm之前先说说Monorepo，它是一个思想，我举个例子，我现在需要做一个大项目——电商平台，那么我需要做以下几个子项目：

电商Web端
电商H5端
电商的后台管理系统

其实这三个子项目，都会用到网络请求、工具函数、公用组件，也就是：

axios -> request
lodash -> utils
antd -> components
。。。。。

按照以前的规范，一个项目肯定要安装一次axios，然后封装一遍request，但是其实这三个小项目都可以共用一个request，这样做的好处是：

1、多个项目统一规范，因为用到是同一个封装
2、不需要每个项目复制一遍，因为用到是同一个封装
3、request变动的时候，只需要改一处即可，因为用到是同一个封装
4、后续有新子项目时，可以使用现成的封装库

方案

市面上对于Monorepo有两个比较火的方案：

lerna + yarn
pnpm

今天就带大家简单地实践一下pnpm

简单实践

首先展示一下最终的目录：

.
├── README.md
├── package.json
├── apis
├── utils
├── components
├── packages
│   ├── web-client
│   └── h5-client
│   └── admin
└── pnpm-workspace.yaml

安装 pnpm

首先全局安装一下pnpm

npm i pnpm -g

新建一个根项目

首先Monorepo需要一个根项目，所以我们先创建一个根项目，他相当于一个容器，用来存放我们的子项目，所以这个根项目并不需要安装太多的依赖

npm init vue@3

Project Name -> pnpm-monorepo
Typescript -> Yes
JSX -> No
Pinia -> No
Testing -> No
Eslint -> No

创建 pnpm-workspace.yaml

cd pnpm-menorepo

然后新建pnpm-workspace.yaml文件，他的作用是：指定工作空间workspace的目录，里面的内容为：

packages:
  # 子项目存放的地方
  - 'packages/*'
  # 公用组件目录
  - 'components/**'
  # request目录
  - 'apis/**'
  # utils目录
  - 'utils/**'

创建公用目录

接下来创建公用目录：

npm create vite

Project name: apis
Select a framework: › vanilla
Select a variant: › vanilla-ts

npm create vite

Project name: utils
Select a framework: › vanilla
Select a variant: › vanilla-ts

npm init vue@3

Project Name -> compnents
Typescript -> Yes
JSX -> Yes
Pinia -> Yes
Testing -> No
Eslint -> Yes

创建子项目

在packages目录下创建三个子项目：

web-client：web端
h5-client：h5端
admin：后台管理

创建方法使用npm init vue@3进行创建即可

封装request

然后咱们进入到apis目录下，进行请求的封装

cd apis

npm i axios

在apis下创建：

index.ts

在apis/src下创建：

request.ts
user.ts

apis/src/request.ts

import axios from 'axios'
import { AxiosInstance }from 'axios'

const request: AxiosInstance = axios.create()

// 对request进行封装。。。这里省略。。。。

export default request

apis/src/user.ts

import request from './request'

export const getUser = (id: number) => {
  return request.get(`/v1/api/user/${id}`)
}

interface IUser {
  username: string;
  password: string;
}

export const createUser = (user: IUser) => {
  return request.post(`/v1/api/user`, user)
}

apis/index.ts

export * from './src/user'

然后我们需要对apis这个包进行命名，并赋予版本号，这个名称和版本号，决定了子项目引用这个包时的显示。。

apis/package.json

{
  "name": "@sx/apis",
  "private": true,
  "main": "index.ts",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  },
  "dependencies": {
    "axios": "^0.27.2"
  }
}

子项目使用request

我们有三个子项目：

web-client：web端
h5-client：h5端
admin：后台管理

现在这三个子项目都可以去使用这个封装好的request，那应该怎么去使用呢？需要用pnpm

// 进入子项目
cd packages/web-client

// 这个名称就是刚刚你所设置的名称
pnpm add @sx/apis

现在我们看看web-client的package.json，可以看到这个公用的包已经被引入了

你也可以在项目中去使用：

import { getuser } from '@sx/apis'

其他子项目想使用@sx/apis，也是一样的做法。。