创建组件库

开发自己的组件库，并且上传到npm

初始化基础目录框架

首先创建我们的文件夹,和npm创建一样，使用pnpm init即可，当我们创建完成之后，会得到一个package.json

{
  "name": "@seekhoo/ikun-ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Seekhoo <hu@seekhoo.cn>",
  "license": "MIT"
}

但是作为我们的根目录，这个项目并不需要发布，我们对他进行简单的改造，将其设置为私有，我们不需要版本，不需要关键字、入口文件等等，改为如下基础配置即可

{
  "name": "@seekhoo/ikun-ui",
  "private": true,
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Seekhoo <hu@seekhoo.cn>",
  "license": "MIT"
}

在根目录下创建一个配置.npmrc文件

shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true

创建子项目

在pnpm当中，我们要创建Monorepo结构需要依赖于一个配置文件pnpm-workspace.yaml，我们在根目录下创建它，在配置文件中我们需要什么，哪些下面的项目为我们的子目录（yaml文件类似与json文件，都是为了表示具体的键值对形式的配置），在申明前，我们需要考虑，我们需要哪些子项目，正常来讲我们必要的包含组件库项目、开发时预览项目用于调试、开发文档项目（用于最终上线的文档） 、公共方法项目（用于抽离公共逻辑） ,这些我们前期需要用到的项目，参考 Elemtn-plus 可以发现，他抽离了更多的项目，在根目录得package.json文件当中以@Element-plus/开头得都是一个单独的项目 pnpm-workspace.yaml文件

packages:
  - packages/*
  - docs
  - example

此时的目录结构

x-ui
├─ .npmrc
├─ docs
├─ example
├─ package.json
├─ packages
│  ├─ components
│  ├─ theme-chalk
│  └─ utils
├─ pnpm-lock.yaml
├─ pnpm-workspace.yaml
└─ tsconfig.json