搭建monorepo项目

开发环境搭建

开发环境搭建

初始化项目
```
pnpm init
```
根目录新增.npmrc文件
内容如下
```
shamefully-hoist=true
```
shamefully-hoist=true不扁平化node_modules目录，方便依赖引入（使用pnpm安装的话，会默认扁平化安装目录）
根目录新增pnpm-workspace.yaml文件
内容如下
```
# 包管理在packages目录下
packages:
  - 'packages/*'
```
表示包所在的目录
配置ts和打包
```
pnpm install typescript esbuild minist -D -w
```
-D 开发依赖
-w 安装在根目录的package.json中，所有的包都可以共享此依赖

初始化tsconfig.json配置

npx tsc --init

配置内容如下

{
  "compilerOptions": {
    "outDir": "dist", // 输出的目录
    "sourceMap": true, // 采用sourcemap
    "target": "es2016", // 目标语法
    "module": "esnext", // 模块格式
    "moduleResolution": "node", // 模块解析方式
    "strict": false, // 严格模式
    "resolveJsonModule": true, // 解析json模块
    "esModuleInterop": true, // 允许通过es6语法引入commonjs模块
    "jsx": "preserve", // jsx 不转义
    "lib": ["esnext", "dom"], // 支持的类库 esnext及dom
    "baseUrl": ".", // 基础路径
    "paths": {
      "@vue/*": ["packages/*/src"] // 路径别名 支持在ts文件中通过@vue/reactivity引入reactivity包
    }
  }
}

配置打包脚本
1.配置package.json文件
package文件字段解读：地址

private:true发布npm包的时候，不发布此包

type:module使用esm模块规范（支持import xxx from xxx）

dev配置打包脚本。参数说明：reactivity包名， -f esm 打包格式

{
  "name": "monorepo-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "node scripts/dev.js reactivity -f esm"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.15.0",
  "dependencies": {
    "vue": "^3.5.20"
  },
  "devDependencies": {
    "esbuild": "^0.25.9",
    "minimist": "^1.2.8",
    "typescript": "^5.9.2"
  }
}

2.配置dev.js脚本

新增scripts文件夹，在文件夹新增dev.js文件

内容如下

// 打包的脚本
// node scripts/dev.js reactivity -f esm
// reactivity 包名
// -f esm 打包的格式

// 使用esm模块规范  
// package.json =>  "type": "module",
import minimist from "minimist"
import { fileURLToPath } from 'url'
import { dirname, resolve } from 'path'
import { createRequire } from 'module'
// process.argv.slice(2) => 获取命令行参数  => ['reactivity', '-f', 'esm']
const args = minimist(process.argv.slice(2))
const target = args._[0] || 'reactivity' // 包名
const format = args.f || 'esm' // 打包的格式
// import.meta.url 获取当前文件的url
// fileURLToPath 将url转换为路径
// __filename 当前文件的路径
const __filename = fileURLToPath(import.meta.url)
// __dirname 当前文件的目录
const __dirname = dirname(__filename)
// createRequire 创建一个require函数
const require = createRequire(import.meta.url)
// 入口文件
const entry = resolve(__dirname, `../packages/${target}/src/index.ts`)

配置packages包
其中文件名为包名，每个包都有自己的package.json文件，入口文件index.ts

注意：package.json的文件名命名为@xxx1/xxx2，其中xxx1代表项目名称，xxx2代表包名称。例如@vue/reactivity

为了使导入包的支持这种格式，tsconfig.json新增配置：

{
	// ...其他配置项
    "baseUrl": ".", // 基础路径
    "paths": {
      "@vue/*": ["packages/*/src"] // 路径别名 支持在ts文件中通过@vue/reactivity引入reactivity包
    }
  }
}

现在可以在某个包导入packages里的其他包

如果要在某个里包安装packages里的其他包，使用命令行

pnpm install @vue/shared --workspace --filter @vue/reactivity

pnpm-workspace地址

包reactivity的node_moudles里新增了安装的包

配置esbuild

更新dev.js文件

// 打包的脚本
// node scripts/dev.js reactivity -f esm
// reactivity 包名
// -f esm打包的格式

// 使用esm模块规范  
// package.json =>  "type": "module",
import minimist from "minimist"
import { fileURLToPath } from 'url'
import { dirname, resolve } from 'path'
import { createRequire } from 'module'
import esbuild from 'esbuild'
// process.argv.slice(2) => 获取命令行参数  => ['reactivity', '-f', 'esm']
const args = minimist(process.argv.slice(2))
const target = args._[0] || 'reactivity' // 包名
const format = args.f || 'esm' // 打包的格式
// import.meta.url 获取当前文件的url
// fileURLToPath 将url转换为路径
// __filename 当前文件的路径
const __filename = fileURLToPath(import.meta.url)
// __dirname 当前文件的目录
const __dirname = dirname(__filename)
// createRequire 创建一个require函数
const require = createRequire(import.meta.url)
// 入口文件
const entry = resolve(__dirname, `../packages/${target}/src/index.ts`)
const pkg = require(resolve(__dirname, `../packages/${target}/package.json`))
// esbuild打包
esbuild.build({
  // 入口文件
  entryPoints: [entry],
  // 输出文件
  outfile: resolve(__dirname, `../packages/${target}/dist/${target}.js`),
  // 依赖的包会打包到一起
  bundle: true,
  // 给浏览器使用
  platform: 'browser',
  // 生成sourcemap 可以调试
  sourcemap: true,
  // 打包的格式
  format, // esm cjs iife(立即执行函数)
  // 全局变量
  globalName: pkg.buildOptions?.name
}).then(() => {
  console.log('打包成功');
}).catch(() => {
  console.log('打包失败');
})

运行打包命令：

pnpm dev

dist为输出目录，里面有输出文件，如果此包依赖packages里其他的包，会同时打包进来

搭建monorepo项目

开发环境搭建 #

开发环境搭建