npm、yarn、pnpm和monorepo的使用方法

npm、yarn、pnpm和monorepo的使用方法

npm

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

npm的特点：

• 方便：npm可以方便地安装、升级、卸载依赖包，还可以发布自己的包到 NPM 仓库。

安装

安装 node.js 的时候会相应的安装 npm，node.js 已经集成了 npm，所以安装 node.js 后 npm 也安装好了。

常用命令

// 初始化命令
npm init
// 运行脚本
npm run
// 发布包
npm publish
// 清除缓存
npm cache clean
// 安装所有依赖
npm install
npm i
// 安装某个依赖项
npm install [package]
// 安装开发依赖
npm install --save-dev [package]
npm install -D [package]
// 卸载依赖
npm uninstall [package]
// 更新全部依赖
npm update
// 更新某个依赖
npm update [package]

yarn

yarn是一个快速、可靠、安全的依赖管理工具。

yarn的特点：

• 速度超快：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
• 超级安全：在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
• 超级可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

安装

npm i yarn -g

常用命令

// 初始化命令
yatn init
// 运行脚本
yatn run
yatn
// 发布包
yatn publish
// 清除缓存
yarn cache clean
// 安装所有依赖
yatn install
yatn i
// 安装某个依赖项
yatn add [package]
// 安装开发依赖
yatn add --save-dev [package]
yatn add -D [package]
// 卸载依赖
yatn remove [package]
// 更新全部依赖
yatn upgrade
// 更新某个依赖
yatn upgrade [package]
// yarn set version latest # 最新版
// yarn set version canary # 最新的经典版
// yarn set version classic # 最新的经典版
// yarn set version 3.x
// 设置yarn版本
yarn set version <version>

pnpm

pnpm是一个快速的，节省磁盘空间的包管理工具。

pnpm的特点：

• 快速：pnpm 比其他包管理器快 2 倍。
• 高效：node_modules 中的文件为复制或链接自特定的内容寻址存储库。
• 支持：monorepos：pnpm 内置支持单仓多包。
• 严格：pnpm 默认创建了一个非平铺的 node_modules，因此代码无法访问任意包。

安装

npm i pnpm -g

常用命令

pnpm 使用 npm 的配置 格式。 因此，您设置配置的方式应该与 npm 相同。 例如：

// 初始化命令
pnpm init
// 运行脚本
pnpm run
pnpm
// 发布包
pnpm publish
// 安装所有依赖
pnpm install
pnpm i
// 安装某个依赖项
pnpm add [package]
// 安装开发依赖
pnpm add --save-dev [package]
pnpm add -D [package]
// 卸载依赖
pnpm remove [package]
// 更新全部依赖
pnpm update
pnpm up
// 更新某个依赖
pnpm update [package]
pnpm up [package]

npm、yarn 和 pnpm对比

npm/yarn - 缺点

• 扁平的node_modules结构允许访问没有引用的package。
• 来自不同项目的package不能共享，这是对磁盘空间的消耗。
• 安装缓慢，大量重复安装node_modules。

pnpm - 解决方案

• pnpm使用独创的基于symlink的node_modules结构，只允许访问package.json中的引入packages（严格）。
• 安装的package存储在一个任何文件夹都可以访问的目录里并用硬连接到各个node_modules，以节省磁盘空间（高效）。
• 有了上述改变，安装也会更快（快速）。
• 内置支持monorepo。

monorepo

monorepo(monolithic repository)是一种项目架构,简单的来说:一个仓库内包含多个开发项目(模块,包)。

使用pnpm + monorepo + wujie-micro 搭建微前端应用

什么是微前端

微前端的核心思想就是将按照不同功能或不同维度拆分的独立子应用，通过主应用来加载这些子应用，达到子项目可以独立开发、独立部署、不受技术栈影响效果。

wujie-micro

无界微前端方案基于 WebComponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。

安装pnpm

pnpm内置了对单个代码仓库包含多个软件包的支持，是monorepo架构模式的不二速选。

npm i pnpm -g

创建目录

新增一个monorepo文件夹

mkdir monorepo

在monorepo下创建主应用 main 文件夹（vue3 项目）和 子应用 web 文件夹，web文件夹下创建 vue3-demo 项目和 react-demo 项目,common文件夹下放公共方法等。

pnpm create vite main

选择vue 和 typescript 回车

然后创建 web 文件夹，web文件夹下创建 vue3-demo 项目和 react-demo 项目。

mkdir web
cd web
// 选择 vue 和 typescript 
pnpm create vite vue3-demo
// 选择 react 和 typescript 
pnpm create vite react-demo
//新建文件夹 公共文件
mkdir common

配置monorepo

在根目录新建一个 pnpm-workspace.yaml 配置依赖项，会把所有的公共依赖项抽到外层，而里层的依赖项都是一些最核心的。
~monorepo/pnpm-workspace.yaml

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

根目录monorepo下安装依赖

cd ../
pnpm install

目录结构如下:

配置common

cd common
//初始化
pnpm init
pnpm i axios
//common文件夹下 新建index.ts 文件
mkdir index.ts

在index.ts 文件里导出方法

import axios from 'axios'

export const baidu = axios.get('https://www.baidu.com/')

在main项目里使用common里的方法

cd ..
//将common导入到main项目
pnpm -F main add common

同理，其他两个子应用也是可以添加common的，添加成功后会在package.json看到安装了common依赖项。

在项目正常引用和使用 common方法
~main/src/App.vue

import { baidu } from "common"
console.log('baidu:', baidu)

运行项目

pnpm -F vue3-demo dev
pnpm -F react-demo dev
pnpm -F main dev

配置wujie-micro

主应用安装无界

cd main
// vue2 框架
// pnpm i wujie-vue2 -S
// vue3 框架
// pnpm i wujie-vue3 -S
// react 框架
// npm i wujie-react -S
pnpm i wujie-vue3 -S

主应用 main 项目引用wujie
~main/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import WujieVue from 'wujie-vue3'

createApp(App).use(WujieVue).mount('#app')

在HelloWorld.vue里使用wujie组件
~main/src/components/HelloWorld.vue

<template>
  main
  <div class="box">
    <WujieVue width="100%" height="100%" name="react" :url="reactUrl"></WujieVue>
    <WujieVue width="100%" height="100%" name="vue3" :url="vue3Url"></WujieVue>
  </div>
</template>
 
<script setup lang='ts'>
const vue3Url = 'http://127.0.0.1:6001'
const reactUrl = 'http://127.0.0.1:6002'
</script>
 
<style scoped >
.box {
  display: flex;
}
</style>

这样就简单的实现微前端应用，如果还需要其他功能可以参考官方文档：https://wujie-micro.github.io/doc/pack/

参考资料

https://www.npmjs.cn/
https://yarn.bootcss.com/
https://pnpm.io/zh/
https://wujie-micro.github.io/doc/
https://blog.csdn.net/qq1195566313/article/details/129679142?spm=1001.2014.3001.5501
https://www.51cto.com/article/702726.html