Vue3中使用pnpm搭建monorepo開發環境

Posted on by

前言

Vue3 源碼閱讀系列，計劃從環境搭建開始，將 Vue3 的響應式模塊，運行時模塊和編譯器模塊，以及狀態庫 Pinia、路由庫 Vue-Router的核心原理做一個梳理。這大概是一個漫長的過程。祝自己不要爛尾，祝大傢有所收獲。

Pnpm 和 Monorepo

Pnpm 是新一代的 nodejs 包管理工具。第一個 “P”意為 Performance，代表著更佳的性能。

它的主要優點有兩個，一是采用瞭 hard-link 機制，避免瞭包的重復安裝，節省瞭空間，同時能提高項目依賴的安裝速度。二是對monorepo 的支持非常友好，隻需要一條配置就能實現。

Monorepo 是一種新的倉庫管理方式。過去的項目，大多采用一個倉庫維護一個項目的方案。對於一個龐大復雜的項目，哪怕隻進行一處小小的修改，影響的也是整體。而采用 monorepo 的形式，我們可以在一個倉庫中管理多個包。每個包都可以單獨發佈和使用，就好像是一個倉庫中又有若幹個小倉庫。

Vue3 源碼采用 monorepo 方式進行管理，將眾多模塊拆分到 packages 目錄中。

這帶來的最直觀的好處，就是方便管理和維護。而且，它不像 Vue2 那樣將源碼整體打包對外暴露。Vue3的這種組織形式，方便的實現瞭 Tree-shaking，需要哪個功能就引入對應的模塊，能大大減少打包後項目的體積。

搭建開發環境

創建項目

首先全局安裝 pnpm：

npm install -g pnpm

新建一個目錄並進行初始化：

mkdir vue3-learn
cd vue3-learn
pnpm init
mkdir packages

配置 monorepo

在項目根目錄下新建 pnpm-workspace.yaml 文件：

packages:
  - 'packages/*'

意思是，將 packages 目錄下所有的目錄都作為單獨的包進行管理。

通過這樣一個簡單的配置，Monorepo 開發環境搭建好瞭。

如果大傢之前接觸過 lerna + yarn workspace的方案，就會深有體會，使用 pnpm 的確方便。Vue3，Element Plus以前采用的方案就是前者，現在都已經改用後者瞭。

安裝依賴

如果你使用過 Vite，就一定體驗過它的快。因為 Vite 內置瞭 esbuild 作為開發階段的構建工具。esbuild 的特點就是快。

Vue3 采用瞭和 vite 一致的選擇，開發階段使用 esbuild 作為構建工具，在生產階段采用 rollup 進行打包。

我們先安裝一些依賴：

# 源碼采用 typescript 編寫
pnpm add  -D -w typescript
# 構建工具，命令行參數解析工具
pnpm add -D -w esbuild rollup rollup-plugin-typescript2 @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-commonjs minimist execa

說明：

-D：作為開發依賴安裝

-w：monorepo 環境默認會認為應該將依賴安裝到具體的 package中。使用 -w 參數，告訴 pnpm 將依賴安裝到 workspace-root，也就是項目的根目錄。

依賴說明：

依賴 描述
typescript 項目使用 typescript 進行開發
esbuild 開發階段的構建工具
rollup 生產階段的構建工具
rollup-plugin-typescript2 rollup 編譯 ts 的插件
@rollup/plugin-json rollup 默認采用 esm 方式解析模塊，該插件將 json 解析為 esm 供 rollup 處理
@rollup/plugin-node-resolve rollup 默認采用 esm 方式解析模塊，該插件可以解析安裝在 node_modules 下的第三方模塊
@rollup/plugin-commonjs 將 commonjs 模塊 轉化為 esm 模塊
minimist 解析命令行參數
execa 生產階段開啟子進程

初始化Typescript

pnpm tsc --init

pnpm 的使用基本和 npm 一致。這裡的用法就相當於 npm 中的 npx：

npx tsc --init

意思是，去 node_modules 下的 .bin 目錄中找到tsc 命令，並執行它。

執行完該命令，會在項目根目錄生成一個 tsconfig.json 文件，進行一些配置：

{
  "compilerOptions": {
    "outDir": "dist", // 輸出的目錄
    "sourceMap": true, // 開啟 sourcemap
    "target": "es2016", // 轉譯的目標語法
    "module": "esnext", // 模塊格式
    "moduleResolution": "node", // 模塊解析方式
    "strict": false, // 關閉嚴格模式，就能使用 any 瞭
    "resolveJsonModule": true, // 解析 json 模塊
    "esModuleInterop": true, // 允許通過 es6 語法引入 commonjs 模塊
    "jsx": "preserve", // jsx 不轉義
    "lib": ["esnext", "dom"], // 支持的類庫 esnext及dom
    "baseUrl": ".",  // 當前目錄，即項目根目錄作為基礎目錄
    "paths": { // 路徑別名配置
      "@my-vue/*": ["packages/*/src"]  // 當引入 @my-vue/時，去 packages/*/src中找
    },
  }
}

準備兩個模塊

我們先在 packages 目錄下新建兩個模塊，分別是 reactivity 響應式模塊 和 shared 工具庫模塊。然後編寫構建腳本進行第一次的開發調試。

shared

在 packages 下新建 shared 目錄，並初始化：

pnpm init

然後修改 package.json：

{
  "name": "@my-vue/shared",
  "version": "1.0.0",
  "description": "@my-vue/shared",
  "main": "dist/shared.cjs.js",
  "module": "dist/shared.esm-bundler.js"
}

註意 name 字段的值，我們使用瞭一個 @scope 作用域，它相當於 npm 包的命名空間，可以使項目結構更加清晰，也能減少包的重名。

編寫該模塊的入口文件：

// src/index.ts
/**
 * 判斷對象
 */
export const isObject = (value) =>{
    return typeof value === 'object' && value !== null
}
/**
 * 判斷函數
 */
export const isFunction= (value) =>{
    return typeof value === 'function'
}
/**
 * 判斷字符串
 */
export const isString = (value) => {
    return typeof value === 'string'
}
/**
 * 判斷數字
 */
export const isNumber =(value)=>{
    return typeof value === 'number'
}
/**
 * 判斷數組
 */
export const isArray = Array.isArray

reactivity

在packages 下新建 reactivity 目錄，並初始化：

pnpm init

然後修改 package.json：

{
  "name": "@my-vue/reactivity",
  "version": "1.0.0",
  "description": "@my-vue/reactivity",
  "main": "dist/reactivity.cjs.js",
  "module": "dist/reactivity.esm-bundler.js",
  "buildOptions": {
    "name": "VueReactivity"
  }
}

在瀏覽器中以 IIFE 格式使用響應式模塊時，需要給模塊指定一個全局變量名字，通過 buildOptions.name 進行指定，將來打包時會作為配置使用。

main 指定的文件支持 commonjs 規范進行導入，也就是說在nodejs 環境中，通過 require 方法導入該模塊時，會導入 main 指定的文件。

同理，module 指定的是使用 ES Module 規范導入模塊時的入口文件。

編寫該模塊的入口文件：

// src/index.ts
import { isObject } from '@my-vue/shared'
const obj = {name: 'Vue3'}
console.log(isObject(obj))

在 reactivity 包中用到瞭另一個包 shared ，需要安裝才能使用：

pnpm add @my-vue/shared@workspace --filter @my-vue/reactivity

意思是，將本地 workspace 內的 @my-vue/shared 包，安裝到 @my-vue/reactivity包中去。

此時，查看 reactivity 包的依賴信息：

"dependencies": {
   "@my-vue/shared": "workspace:^1.0.0"
}

編寫構建腳本

在根目錄下新建 scripts 目錄，存放項目構建的腳本。

新建 dev.js，作為開發階段的構建腳本。

// scripts/dev.js
// 使用 minimist 解析命令行參數
const args = require('minimist')(process.argv.slice(2))
const path = require('path')
// 使用 esbuild 作為構建工具
const { build } = require('esbuild')
// 需要打包的模塊。默認打包 reactivity 模塊
const target = args._[0] || 'reactivity'
// 打包的格式。默認為 global，即打包成 IIFE 格式，在瀏覽器中使用
const format = args.f || 'global'
// 打包的入口文件。每個模塊的 src/index.ts 作為該模塊的入口文件
const entry = path.resolve(__dirname, `../packages/${target}/src/index.ts`)
// 打包文件的輸出格式
const outputFormat = format.startsWith('global') ? 'iife' : format === 'cjs' ? 'cjs' : 'esm'
// 文件輸出路徑。輸出到模塊目錄下的 dist 目錄下，並以各自的模塊規范為後綴名作為區分
const outfile = path.resolve(__dirname, `../packages/${target}/dist/${target}.${format}.js`)
// 讀取模塊的 package.json，它包含瞭一些打包時需要用到的配置信息
const pkg = require(path.resolve(__dirname, `../packages/${target}/package.json`))
// buildOptions.name 是模塊打包為 IIFE 格式時的全局變量名字
const pgkGlobalName = pkg?.buildOptions?.name
console.log('模塊信息：\n', entry, '\n', format, '\n', outputFormat, '\n', outfile)
// 使用 esbuild 打包
build({
  // 打包入口文件，是一個數組或者對象
  entryPoints: [entry], 
  // 輸入文件路徑
  outfile, 
  // 將依賴的文件遞歸的打包到一個文件中，默認不會進行打包
  bundle: true, 
  // 開啟 sourceMap
  sourcemap: true,
  // 打包文件的輸出格式，值有三種：iife、cjs 和 esm
  format: outputFormat, 
  // 如果輸出格式為 IIFE，需要為其指定一個全局變量名字
  globalName: pgkGlobalName, 
  // 默認情況下，esbuild 構建會生成用於瀏覽器的代碼。如果打包的文件是在 node 環境運行，需要將平臺設置為node
  platform: format === 'cjs' ? 'node' : 'browser',
  // 監聽文件變化，進行重新構建
  watch: {
   onRebuild (error, result) {
       if (error) {
           console.error('build 失敗：', error)
       } else {
           console.log('build 成功:', result) 
       }
    }
  }
}).then(() => {
  console.log('watching ...')
})

使用該腳本，會使用 esbuild 對 packages 下的包進行構建，打包的結果放到各個包的 dist 目錄下。

在開發階段，我們默認打包成 IIFE 格式，方便在瀏覽器中使用 html 文件進行測試。在生產階段，會分別打包成 CommonJS，ES Module 和 IIFE 的格式。

完成第一次調試

給項目增加一條 scripts 命令：

// package.json
"scripts": {
    "dev": "node scripts/dev.js reactivity -f global"
}

意思是，以 IIFE 的格式，打包 reactivity 模塊，打包後的文件可以運行在瀏覽器中。

在終端中執行：

pnpm dev

輸出：

PS D:\vue3-learn> pnpm dev
> [email protected] dev D:\vue3-learn
> node scripts/dev.js reactivity -f global
模塊信息：
 D:\vue3-learn\packages\reactivity\src\index.ts
 global
 iife
 D:\demo3\vue3-learn\packages\reactivity\dist\reactivity.global.js
watching …

編寫一個 html 文件進行測試：

// packages/reactivity/test/index.html
<body>
    <div id="app"></div>
    <script src="../dist/reactivity.global.js"></script>
</body>

打開瀏覽器控制臺：

小結

到此，一個基本的 monorepo 開發環境就搭建完畢瞭。

代碼已上傳至 Github ，點擊訪問。

更多關於Vue3 pnpm搭建monorepo的資料請關註WalkonNet其它相關文章！

推薦閱讀：