2022/07/30

pnpm工作空间配置

使用pnpm创建工作空间，使多项目互相依赖公共内容，减少磁盘占用和反复开发引用组件成本（本地开发）。

pnpm是什么#

pnpm和npm、yarn都是包依赖管理，使用起来没多大差异。这里用它主要还是工作空间吸引了我。想想项目动则按GB来安装依赖包，项目多起来简直就是磁盘灾难（多几个G放小姐姐不香嘛）。

利用工作空间还可以减少项目共用组件的依赖，又节省了点开销，还可以在不同的项目中共用，简直不要太爽。

说依赖过多，下载会很慢。未来也许很慢吧，至少pnpm目前速度还是很快的。

pnpm安装#

看官方介绍：https://pnpm.io/zh/installation

配置工作空间#

  1. 先新建一个文件夹当作项目文件夹（使用英文名称）。

    注意：该根目录下不应存在可运行项目，可运行项目请在packages目录下创建

  2. 在根目录新建packages（项目目录）、components（组件目录）和 pnpm-workspace.yaml 文件

  3. 打开文件pnpm-workspace.yaml写入下面代码 官网详细介绍

    packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'
  # all packages in subdirs of components/
  - 'components/**'
  # 根据需要可以添加自己的目录到根目录上进行依赖管理
  # - 'api/**'
  # - 'utils/**'
  # 不包含目录
  - '!**/test/**'

关联工作空间#

关联工作空间主要是利用package.json进行的配置和关联，如果目标目录已经存在该文件请查阅3、5即可。其他参数请看官方介绍

  1. 在命令行中分别进入该文件夹根目录、components目录和packages目录，使用pnpm init命令自动创建package.json文件

    package.json文件可以用vue-cil、umi-cil等工具进行项目初始化得到。可根据项目开发框架进行选择。尤其是packages下面的项目目录。

  2. 在components目录下新建index.js。index.js文件将个组件import使用（如果项目需要单独使用某个组件，组件文件夹也可以存在package.json进行name和main的定义）。

    注意：如果是别的入口文件(main.js)，请将package.json文件中的main参数的值index.js修改为main.js

  3. 为了避免包冲突，修改package.json文件的name为唯一名字（例如：@yourname/components）

  4. 在packages目录下面新建目录用pnpm init或其他框架cil初始化新项目（例：项目文件夹叫 demo）

  5. 进入/packages/demo目录，可以在命令行中使用 pnpm add @yourname/components添加组件工作空间的名字，或者打开package.json文件在dependencies中添加"@yourname/components": "workspace:*"使其包互相关联。使用命令添加的会自带版本号。

至此工作空间的创建和关联包配置完毕。在命令行中退回到根目录使用pnpm i可以安装组件和项目的所有依赖，node_modules会存在很多目录中，但大多是快捷方式，大大减少磁盘占用率。

js文件中使用包#

在js文件中导入包名即可

import "@iqszlong/components";

项目注意事项#

整个项目已经使用pnpm进行包管理了，就不要在packages里面的项目中用其他npm、yarn等进行包管理。dev开发和build目前倒是没有发现问题（webpack、vite、umi、quasar等都可以）

更多#

查阅官方workspace说明

分类: 文章
标签: pnpmconfig