簡單帶大家實踐一下 pnpm，也就幾分鐘的事情~

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。

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，也是一樣的做法。。

前端之神 一位前端小菜雞，寫過 100 多篇原創文章，全網有 5w + 個前端朋友，夢想是成爲” 前端之神 “~

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/7Gge0aHQB1qsc3Kh3V4IoQ

前言