monorepo+vue3+ts组件库(一)文件结构： node_modules .bin 可执行文件 .pnpm 快速

pnpm构建基础项目

参考：pnpm官网

文件结构：
- node_modules
  - .bin 可执行文件
  - .pnpm 快速、高效的包管理工具
  - typescript 存放了所有包的真实数据，并通过符号链接的方式链接到主 node_modules 目录中。这种结构确保了在不同项目间共享依赖包，减少了重复安装的空间占用。
  - vue
  - .modules.yaml
- package.json
- pnpm-lock.yaml
配置.npmrc文件提升.pnpm目录中想提升的包。配置完成后，重新执行pnpm i。

shamefully-hoist = true # 强制将依赖安装在根目录下

// 幽灵依赖：没有安装却能使用，比如：
// "lodash": "^4.17.15" 依赖lodash，但是lodash没有安装，但是npm install lodash --save-dev 却能安装到根目录下。
// 这种依赖称为幽灵依赖，会导致依赖包的版本不受限制，可能会导致版本冲突。
// 强制将依赖安装在根目录下，导致依赖包的版本不受限制，可能会导致版本冲突。

配置ts文件：
- 执行pnpm tsc --init命令初始化，会执行node_modules/.bin/tsc文件。
- 自动生成tsconfig.json文件，内容如下：

  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

修改tsconfig.json文件内容：

{
  "compilerOptions": {
    "module": "ESNext", // 使用 ESNext 模块系统
    "declaration": false, // 不生成声明文件
    "noImplicitAny": false, // 允许隐式的 any 类型
    "removeComments": true, // 移除注释
    "moduleResolution": "node", // 使用 Node 模块解析策略
    "esModuleInterop": true, // 兼容 ES6 和 CommonJS 模块
    "jsx": "preserve", // 保留 JSX 语法，不进行转换
    "noLib": false, // 包含默认库文件
    "target": "es6", // 编译目标为 ES6
    "sourceMap": true, // 生成 source map 文件
    "lib": [ // 使用的库
      "ESNext",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true, // 允许默认导入没有默认导出的模块
    "experimentalDecorators": true, // 启用装饰器语法
    "forceConsistentCasingInFileNames": true, // 强制文件名一致大小写
    "resolveJsonModule": true, // 支持导入 JSON 模块
    "strict": true, // 启用严格模式
    "skipLibCheck": true // 跳过库文件类型检查
  },
  "exclude": [ // 排除的文件或目录
    "node_modules",
    "**/__tests__",
    "dist/**"
  ]
}

创建pnpm-workspace.yaml,配置如下：

    packages:
  - "packages/*"   # 匹配所有 packages 目录下所有子目录
  - play # 存放组件测试代码
  - docs/*        # 匹配所有 docs 目录下所有子目录 组件文档

创建packages/components/package.json,配置如下：

{
  "name": "@zi-shui/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在根目录下执行pnpm add @zi-shui/components，遇到报错
提示要添加-w关键字
问题："@zi-shui/components": "workspace:*" "@zi-shui/components": "workspace:^"两者有什么区别？
- *表示严格匹配精确版本，不允许任何版本范围更新，确保子项目使用与工作区完全一致。
- ^表示遵循当前主版本范围更新，可以更新到同一主版本号下的任何版本，有一定的灵活性。

配置	解释	更新范围
"workspace:*"	强制使用与工作区精确匹配的版本，不允许版本范围的变化	只能使用当前工作区的精确版本
"workspace:^"	允许在同一主版本范围内进行更新，次版本和补丁版本可以变化	`^1.0.0` → 允许 `1.x.x` 更新（不包括 `2.0.0`）

依次在主目录下安装"@zi-shui/utils": "workspace:*","@zi-shui/theme-chalk": "workspace:*"。
根目录下，用vite手脚架创建项目pnpm create vite play --template vue-ts
删除play/README.md、play/.gitignore、play/src/components、play/src/assets、play/src/style.css
将play项目下的.d.ts提升至根目录下的typings/vue-shim.d.ts下，利于全局引用

declare module "*.vue" {
  import type { DefineComponent} from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

由于下play项目下运行pnpm dev本地跑不方便，需要提升至根目录下，配置方式如下：
- 根目录的package.json: 表示运行play项目vite手脚架

  "scripts": {
    "dev": "pnpm -C play dev"
  },