搭建vue3组件库(一):Monorepo项目搭建

Monorepo

Monorepo 是一种项目代码管理方式，指单个仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。

pnpm

pnpm 全称 performant npm，意思为 高性能的 npm。pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。

安装pnpm

npm install pnpm -g

 初始化项目

在根目录执行

pnpm init

会自动生成package.json文件

{
  "name": "vision-ui-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

指定项目运行的Node版本

为了减少因node的版本的差异而产生开发环境错误，我们在package.json中增加engines字段来限制版本。

{
  "engines": {
      "node": ">=16",
    }
}

安全性设置

为了防止我们的根目录被当作包发布，我们需要在package.json加入如下设置：

{
  "private": true
}

包管理

在根目录新建 packages 用来存放组件库和其他工具库

在根目录新建 pnpm 的工作区文件 pnpm-workspace.yaml

packages:
    - 'packages/**'