cover.png

前言

看完上一篇《關(guān)于PNPM》[1] 的文章，我們了解到 PNPM 擁有速度快、節(jié)省磁盤空間的特性，并且有效解決了幻影依賴和依賴分身的問題。
接下來我們來使用 PNPM 另一個特性(workspace monorepo)來搭建我們的 monorepo 項目。

pnpm 初始化環(huán)境

一、初始化項目：

# 安裝pnpm
npm install -g pnpm
# 創(chuàng)建根項目
mkdir adi-pnpm-monorepo && cd adi-pnpm-monorepo
mkdir packages
# 初始化package.json
npm init -y

二、建立 workspace
在根目錄創(chuàng)建 `pnpm-workspace.yaml：

packages:
  # all packages in subdirs of packages/ and components/
  - 'packages/**'

此時目錄結(jié)構(gòu)如下：

├── package.json
├── packages
└── pnpm-workspace.yaml

三、初始化子項目

cd packages
# pkg1
mkdir pkg1 && cd pkg1
npm init -y
mkdir src && cd src && echo '' > index.ts
cd ../../
# pkg2
mkdir pkg2 && cd pkg2
npm init -y
mkdir src && cd src && echo '' > index.ts
cd ../../

此時目錄結(jié)構(gòu)如下：

├── package.json
├── packages
│   ├── pkg1
│   │   ├── package.json
│   │   └── src
│   │       └── index.ts
│   └── pkg2
│       ├── package.json
│       └── src
│           └── index.ts
└── pnpm-workspace.yaml

分別在 pkg1/src/index.ts、pkg2/src/index.ts寫入測試代碼:

// pkg1
export const add = (a: number, b: number) => a + b;
// pkg2
import { add } from "pkg1";
console.log(`add(1,2) = ${add(1, 2)}`);

添加 typescript 到項目中:

pnpm add typescript -wD
pnpm exec tsc --init
# 改個名
mv tsconfig.json tsconfig.base.json
code tsconfig.json

新建寫入 > tsconfig.json:

// tsconfig.json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "baseUrl": "."
  }
}

分別為子項目創(chuàng)建 tsconfig.json:

// /packages/pkg1/tsconfig.json and /packages/pkg2/tsconfig.json
{
  "extends": "../../tsconfig.base.json",
  "include": ["src"],
  "compilerOptions": {
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

分別修改子項目的 package.json:

// /packages/pkg1/package.json and /packages/pkg2/package.json
{
  ...,
  "main": "./dist/index.mjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "require": "./dist/index.cjs",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
  ...
}

把 pkg1 作為依賴添加到 pkg2 的開發(fā)依賴中:

pnpm add pkg1 --filter pkg2 --workspace -D

此時打開 /packages/pkg2/src/index.ts ts 會提示找不到模塊 pkg1，我們通過添加 paths，告訴 ts 怎么解析我們的 require/import

// /packages/pkg2/package.json
{
  ...,
  "compilerOptions": {
    ...,
    "paths": {
      ...,
      "pkg1": [
        "../pkg1/src/index.ts"
      ]
    }
  }
}

接下來我們用 unbuild 來打包我們的項目

pnpm add unbuild -wD

創(chuàng)建 build.config.ts 到 packages/* 下

// /packages/pkg1/build.config.ts
// /packages/pkg2/build.config.ts
import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  entries: ['src/index'],
  declaration: true,
  clean: true,
  rollup: {
    emitCJS: true,
    inlineDependencies: true,
  },
});

添加打包指令到 packages/* 下

// /packages/pkg1/package.json
// /packages/pkg2/package.json
{
  ...,
  "scripts": {
    "build": "unbuild",
    ...
  },
  ...
}

修改根目錄的package.json

// /package.json
{
  ...,
  "scripts": {
    "build": "pnpm --filter \"./packages\" -r build",
    ...
  },
  ...
}

讓我們打包看看效果吧

pnpm build

node ./packages/pkg2/dist/index.mjs
node ./packages/pkg2/dist/index.cjs
# output
# ADI-LOG => add(1,2) = 3
# ADI-LOG => add(1,2) = 3

Github [2]

總結(jié)

隨著 vue / vite 等越來越多的開源項目遷移到了 PNPM 進(jìn)行管理，相信社區(qū)會越來越活躍，并帶來更多簡單、高效、安全的工具流實踐。

標(biāo)注

1. https://mp.weixin.qq.com/s/F9MXaMwF5RAcsemhycjq8w
2. https://github.com/13168335674/adi-pnpm-monorepo