# 微前端学习2

**Repository Path**: jseven68/microFront2

## Basic Information

- **Project Name**: 微前端学习2
- **Description**: 微前端学习，以无界为例子，学习pnpm, webcomponets,monorepo架构等
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-23
- **Last Updated**: 2024-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## pnpm

pnpm 是一个快速、节省磁盘空间的包管理工具。它使用硬链接来存储包，而不是复制它们。目的就是为了节省硬盘空间和加速装包速度。

pnpm 还支持 monorepos，并且具有快速安装和更新依赖项的功能。

### 特性

- 快速：使用硬链接来存储包，而不是复制它们。
- 节省磁盘空间：使用硬链接来存储包，而不是复制它们。
- 支持 monorepos：支持 monorepos，可以管理多个包。
- 快速安装和更新依赖项：使用 hard links 来存储包，而不是复制它们。
- 支持 npm 和 yarn 格式：支持 npm 和 yarn 格式的包。

### 硬链接和软链接

硬连接：
两个东西，但是两者一个改变另外一个也会同步改变，

软连接：
也叫符号连接，一个东西，就是多个引用，指向的都是一个，改变的也是一个，一般软连接最终都是指向一个硬链接的东西。

### 创建非扁平 node_modules 目录

使用 npm 或 Yarn Classic 安装依赖时，所有包都会提升到模块目录的根目录。因此，源代码可以访问未作为依赖添加到项目中的依赖。

默认情况下，pnpm 使用符号链接仅将项目的直接依赖添加到模块目录的根目录中。

![非扁平](G:\2024-web\microFront2\readMe_images\pnpm.PNG)

### 安装

```bash
npm install -g pnpm
```

### 常用命令

```bash
pnpm install/add/unintall/remove
pnpm store path 查看缓存文件目录
```

### webComponents

1. npm i typescript -g
2. 使用 tsc 编辑 ts 文件
   tsc --init
   tsc -w 实时编译

## monorepo 架构

### 项目结构

```bash
├── packages
│   ├── package1
│   │   ├── src
│   │   │   ├── index.ts
│   │   │   ├── index.css
│   │   │   ├── index.html
│   │   │   ├── index.scss
│   │   │   └── index.less
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── package2
│   │   ├── src
│   │   │   ├── index.ts
│   │   │   ├── index.css
│   │   │   ├── index.html
│   │   │   ├── index.scss
│   │   │   └── index.less
│   │   ├── package.json
│   │   └── tsconfig.json
```

### 步骤

1. 通过 pnpm create vite 先创建主应用，子应用

2. 在根目录执行 pnpm init 然后，新建一个 pnpm-workspace.yaml 配置依赖项

```js
packages:
  # all packages in direct subdirs of packages/
  - 'main'
  # all packages in subdirs of components/
  - 'web/**'

```

配置完成后 pnpm install 一次就行

他会把所有的公共依赖项抽到外层，而里层的依赖项都是一些最核心的

> pnpm -F xxx xx 命令 --执行指定项目命令
> pnpm -F vue-demo dev

### common

公共库，负责公共部分

> 其他应用通过命令 pnpm -F xx 项目名 add common 添加 common，添加完成，packjson 中能看到,然后就可以在项目中直接使用 common 导出的方法了
> 如 main 主应用： pnpm -F main add common

问题：

通过 add 的 common 包，不是以 workspace:xx 开头，导致不能使用，需要手动改

## 无界框架使用

### vue3 组件封装并发布 npm