使用pnpm workspace管理多个软件包

一、官方文档

pnpm 内置了对单一存储库（也称为多包存储库、多项目存储库或单体存储库）的支持，你可以创建一个 workspace 以将多个项目合并到一个仓库中。

pnpm-workspace.yaml | pnpm中文文档 | pnpm中文网

二、pnpm-workspace环境搭建

2.1、创建目录BaseTemplete

2.2、初始化项目

javascript 复制代码

pnpm init

2.3、删除package.json文件中的 main、test，并添加"private": true,

修改后

2.4、创建 pnpm-workspace.yaml 文件

javascript 复制代码

packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'
  # all packages in subdirs of components/
  - 'common/**'
  # exclude packages that are inside test directories
  - '!**/test/**'

2.5、创建目录packages

2.6、进入packages创建项目

javascript 复制代码

cd .\packages\ 

// 创建主项目
pnpm create vite app-main --template vue  

// 创建图表项目
pnpm create vite app-chart--template vue

创建完成后你想得到下图的目录结构

2.7、app-main、app-chart分别在vite.config.ts中设置不同的端口号

javascript 复制代码

server: {
    port: 5173
}

2.8、在整个项目根目录下（BaseTemplete）安装依赖

javascript 复制代码

pnpm i

2.9、根项目package.json配置

javascript 复制代码

"scripts": {
    "dev:main": "pnpm run -C packages/app-main dev",
    "dev:chart": "pnpm run -C packages/app-chart dev",
    "build:main": "pnpm run -C packages/app-chart build",
    "build:chart": "pnpm run -C packages/app-chart build"
  },

2.10、启动项目

javascript 复制代码

pnpm run dev:main

这样我们项目的基本功能就已完成。

三、主项目(app-main)中使用图表项目(app-chart)中的图表

3.1、分析需求

我们希望通过import { xxx }from 'app-chart'的方式在主项目中引入图表项目的图表，并且能够在图表项目中预览到我们开发的所有图表，那么就需要添加一个入口，该入口向外暴露图表项目中所有的图表。

3.2、安装依赖

项目中需要安装各种各样的第三方库，我们以unocss为例，为app-chart项目安装。（app-main项目同理）

javascript 复制代码

 pnpm i unocss --filter app-chart

配置vite.config.js

添加uno.config.js文件

javascript 复制代码

import { defineConfig, presetAttributify, presetUno, presetWind, presetTypography, transformerDirectives, transformerVariantGroup } from 'unocss';

export default defineConfig({
    presets: [presetAttributify(), presetUno(), presetTypography(), presetWind()],
    transformers: [transformerDirectives()],
    theme: {
        container: {
            center: true,
        }
    }
})

在main.js中引入

我们添加一个样式并运行app-chart项目看一下效果

效果图

3.3、制作图表

在components目录下创建demoComponent目录来编写图表组件，如下图

javascript 复制代码

<template lang="">
    <div class="bg-red-500">
        这是一个来自app-chart项目中的图表
    </div>
</template>
<script setup name='demoComponent'>

</script>
<style lang="">
    
</style>

这里我们制作了一个简易的组件，注意这里的name='demoComponent' 及我们最终引入组件是的组件名，下面我们编写index.js将其导出。

javascript 复制代码

import demoComponent from './src/demo.vue';

/* istanbul ignore next */
demoComponent.install = function(Vue) {
  Vue.component(demoComponent.__name, demoComponent);
};

export default demoComponent;