pnpm基础

目录

• 一、npx
  • 1、npx命令执行过程
• 二、pnpm
  • 1、硬链接和软链接
  • 2、pnpm到底做了什么呢？
  • 3、pnpm创建非扁平的node_modules目录
  • 4、npm与pnpm命令对照表
  • 5、pnpm仓库
  • 6、pnpm仓库瘦身
• 三、pnpm monorepo
  • 1、工作区根目录
  • 2、api
  • 3、components
  • 4、packages

一、npx

1、npx命令执行过程

* webpack命令执行过程：执行命令所在目录是否有webpack命令，有则执行，
  没有则找环境变量是否有webpack命令，有则执行
* npx webpack命令执行过程：执行命令所在项目是否有webpack命令，有则执行，
  没有则找全局是否有webpack命令，有则执行，
  没有则会安装webpack到一个临时目录，然后执行，执行结束会删除webpack
* package.json中配置{"scripts": {"build": "webpack"}}，
  执行npm run build，执行的是所在项目的webpack命令

二、pnpm

1、硬链接和软链接

* 文件的拷贝
    - window：copy foo.js foo_copy.js
    - macos：cp foo.js foo_copy.js
    - 原文件和拷贝文件没有影响
* 文件的硬链接
    - window：mklink /H aaa_hard.js aaa.js
    - macos：ln foo.js foo_hard.js
    - 原文件修改，硬链接也会修改。删除原文件，硬链接依然可以访问
* 文件的软链接
    - window：mklink aaa_soft.js aaa.js
    - macos：ln -s foo.js foo_copy.js
    - 删除原文件，软链接不可以访问

2、pnpm到底做了什么呢？

* 如果是使用pnpm，依赖包将被存放在一个统一的位置，因此：
    - 如果你对同一依赖包使用相同的版本，那么磁盘上只有这个依赖包的一份文件；
    - 如果你对同一依赖包需要使用不同的版本，则仅有版本之间不同的文件会被存储起来；
    - 所有文件都保存在硬盘上的统一的位置：
        ~ 当安装软件包时，其包含的所有文件都会硬链接到此位置，而不会占用额外的硬盘空间
        ~ 这让你可以在项目之间方便地共享相同版本的依赖包；

3、pnpm创建非扁平的node_modules目录

* 安装pnpm：npm i -g pnpm
* 查看pnpm版本：pnpm --version
* pnpm初始化：pnpm init
* pnpm添加依赖包：pnpm add axios
* pnpm创建的非扁平node_modules目录结构：
    - node_modules/axios是软链接
    - node_modules/.pnpm/axios是硬链接

4、npm与pnpm命令对照表

pnpm	npm
pnpm install	npm install
pnpm add <pkg>	npm install <pkg>
pnpm remove <pkg>	npm uninstall <pkg>
pnpm <cmd>	npm run <cmd>

5、pnpm仓库

* 获取pnpm仓库目录：pnpm store path
* 不同磁盘是不能建立硬链接的

6、pnpm仓库瘦身

* pnpm仓库瘦身：pnpm store prune

三、pnpm monorepo

1、工作区根目录

• 命令

* 初始化：pnpm init
* 创建组件库：npm create vite
    - components
    - vue
    - javascript

• 新建pnpm-workspace.yaml

# 此文件所在目录，即为工作区根目录
packages:
  # 我负责的所有的前端项目存储的地方
  - 'packages/*'
  # 公共的，给我所有的项目使用的公开组件
  - 'components/**'
  # 公共的方法 api -axios
  - 'api/**'

2、api

• 命令

* 初始化：pnpm init
* 安装：pnpm add axios
    - 工作区根目录为硬链接，非工作区根目录为软链接

• package.json

{
  "name": "@linding-pnpm/api",
  "version": "1.0.0",
  "private": true,
  "main": "index.js"
}

• index.js

export * from "./user"

• user.js

import Axios from "./base"

export const getUser = (data) => Axios.get(data)

• base.js

import axios from "axios"

let Axios = axios.create({
  baseURL: "/"
})
export default Axios

3、components

• 命令

* 安装：pnpm i
    - 不安装的话packages/web执行npm run build会报错

• package.json

{
  "name": "@linding-pnpm/components",
  "private": true,
  "version": "0.0.0",
  "main": "index.js"
}

• index.js

import Button from "./dir/Button.vue";

export default Button

• dir/Button.vue

<template>
  <button>我是一个按钮，我是公共的组件</button>
</template>

4、packages

• 命令

* packages命令：npm create vite
    - web
    - vue
    - javascript
* packages/web命令：pnpm i
* packages/web命令：npm run dev
* packages/web命令：pnpm add @linding-pnpm/api
* packages/web命令：pnpm add @linding-pnpm/components

• packages/web/src/App.vue

<script setup>
import {getUser} from "@linding-pnpm/api";
import Button from "@linding-pnpm/components";

console.log(getUser)
</script>

<template>
  <Button></Button>
</template>

<style scoped>
</style>