0. 使用 pnpm 创建一个 monorepo

本系列文章以开发 JavaScript 全栈项目作为撰文背景,将进行多次的修正。希望大家能多多提建议,如有不足之处,欢迎评论讨论。

项目地址:

pnpm 是一个快速、节省磁盘空间的 Node.js 包管理器,它可以创建 workspace 来实现 monorepo

monorepo 是一种方便管理同一个项目下不同包和依赖的项目实现方式:例如,我们的全栈项目中有服务端客户端管理端还有文档,这些包相互关联也彼此独立,它们会用到相同的依赖,也有各自独有的依赖。那么为了使依赖能最大程度的复用,在这个项目里安装一次依赖,就可以在每个包中使用,这是 monorepo 最大的优势。

Tip: monorepo 的另一大优势就是每个独立的包之间可以相互引用,但在此项目中暂时还没有涉及。

初始化创建

bash 复制代码
# 创建项目目录
$ mkdir full-stack-from-scratch

# 进入目录
$ cd full-stack-from-scratch

# 初始化 git
$ git init

# 初始化 package
$ pnpm init -y

此时的目录里,应该只有一个 package.json 文件。一般情况下,作为项目的主包是不需要发布的,因此需要对该文件进行以下修改,以防主包误发布:

json 复制代码
// package.json

{
  //... 其他配置
  "private": true
}

要启用 pnpmworkspace 需要在目录下创建一个 pnpm-workspace.yaml 文件,内容如下:

yaml 复制代码
# pnpm-workspace.yaml

packages:
  - 'packages/*'  # 指定在 packages 目录下的包
  - docs      # 指定根目录下 docs 包

依据以上配置,创建一些包,结构如下:

bash 复制代码
.
|-- docs  # 文档:使用 vitepress 创建
|   `-- package.json
|-- packages
|   |-- admin  # 管理端:实现一个 CMS
|   |   `-- package.json
|   |-- client # 客户端:用户界面
|   |   `-- package.json
|   `-- server # 服务端:连接数据库和提供 API
|       `-- package.json
|-- package.json
`-- pnpm-workspace.yaml

依赖管理

monorepo 中,如果某个依赖是多个包都需要的,可以直接安装到主包中:

bash 复制代码
$ pnpm add -w <library name>

这样可以直接在子包中直接用,例如前后端都需要用到的 dayjs

如果某个依赖是子包独有的,可以直接安装到子包:

bash 复制代码
$ pnpm add -F <package name> <library name>

package name 对应每个 package.json 中的 name 字段。

scripts 管理

在分包中,可以以一般的方式进行 scripts 的定义,但需要将脚本暴露到主包中,则需要在主包做一些配置。例如,我们要将 full-stack-from-scratch-sever 中的 start 命令暴露到主包中,可以进行如下配置:

json 复制代码
// package.json
{
  "scripts": {
    "server:start": "pnpm -F full-stack-from-scratch-sever start"
  }
}

这样在主包目录下,我们可以通过 pnpm server:start 来执行对应包中的脚本。

至此,一个基于 pnpm workspacemonorepo 大体框架就已经搭建完毕。


created: 2023-11-17

last modified: 2023-11-17

相关推荐
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef068 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder11 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句11 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom11 小时前
JavaScript reduce()函数详解
javascript
小飞悟11 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子11 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手11 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅12 小时前
JavaScript 中你不知道的按位运算
前端·javascript