前言
负责过一个ui项目，在里面摸爬滚打了两年，抱着不希望这些辛苦积累的经验与知识随着时间的推移流逝的想法，于是就有了这篇专栏。示例代码仓分支：Gitee
1、初始化 monorepo 工程
mkdir hp-ui
cd hp-ui
pnpm init
把生成的package.json清空一下。
{
"name": "hp-ui",
"private": true,
"scripts": {},
"dependencies": {},
"devDependencies": {}
}
根目录新建一个pnpm-workspace.yaml文件。
# pnpm-workspace.yaml 文件会让 pnpm 要使用 monorepo 的模式管理这个项目
packages:
# 根目录下的 docs 是一个独立的文档应用，应该被划分为一个模块
- docs
# packages 目录下的每一个目录都作为一个独立的模块
- packages/*
接着建立这样的目录结构。
这些package.json大体上区别不大，name字段要改一下，根目录用hp-ui，packages里面的用@hpui/xxx，docs里面的用@hpui/docs。接下来对组件包的package.json进行修改，这里只举一个组件包的例子。
{
// 标识信息
"name": "@hpui/button",
"version": "0.0.0",
// 基本信息
"description": "",
"keywords": ["vue", "ui", "component library"],
"author": "hp-point",
"scripts": {
// 定义脚本
},
// 入口信息，由于没有实际产物，先设置为空字符串
"main": "",
"module": "",
"types": "",
"exports": {
".": {
"require": "",
"module": "",
"types": ""
}
},
// 发布信息
"files": [
"dist",
"README.md"
],
// 依赖信息
"peerDependencies": {
"vue": ">=3.0.0"
},
"dependencies": {},
"devDependencies": {}
// 如果我们需要发布到私有 npm 仓，请取消 publishConfig 的注释按需填写
// "publishConfig": {
// "access": "public",
// "registry": "https://registry.npmjs.org/"
// },
}
最后补上.gitignore文件。
# .gitignore
node_modules
