vue3 + vite + js + pnpm 组件库框架搭建 ： （一）基础框架搭建

vue3 + vite + js 组件库框架搭建 ： 基础框架搭建

本文将介绍 使用 pnpm + Monorepo 搭建基础组件库框架并对测试组件进行本地引用测试

什么是 Monorepo ？

Monorepo是一种将多个项目存放在同一个代码库中的开发策略

什么是 pnpm ？

pnpm（ performant npm ）指的是高性能的 npm，与 npm 和 yarn 一样是一款包管理工具

第一步

全局安装 pnpm

npm install pnpm -g

第二步

创建一个文件夹用作根目录 名称自定义 （我的是 story-ui，后续以 story-ui 代指根目录）

第三步

// 使用 pnpm 初始化文件
// 在根目录下（story-ui）执行命令 pnpm init 此时会自动生成 package.json 文件
 pnpm init

第四步

在根目录下（story-ui）创建一个子文件夹 用来存放所有开发的组件包，
名称自定义（我的是 packages 后续以 packages 代指存放组件包的目录）

第五步

 在 packages 文件夹中创建两个测试组件包 card 和 button 
 并分别在 card 和 button 文件下执行 pnpm init 命令进行初始化生成 package.json 文件
 
 pnpm init

第六步

更改 card 和 button 文件夹下的 package.json 文件中的 name 名称 
改为@story/card 和 @story/button 这表示 card 和 button 组件 属于 story 组织
package.json 示例：
{
  "name": "@story/button",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

第七步

分别在 card 和 button 目录下创建 index.js 文件

// 在 card/index.js 里编写一段函数并导出用作测试
export default () => {
  console.log("这是@story/card组件");
};
// 在 botton/index.js 里引入 card 组件并执行测试函数
import card from '@story/card'
card()

第八步

配置 workspace

在根目录下（story-ui）创建 pnpm 的工作区 pnpm-workspace.yaml 文件，将包进行关联，内容为

packages:
  - packages/*

这样就表示 packages 目录下的所有包都被关联了

第九步

在 根目录下package.json 中指定 workspace 其实就是包的路径数组，支持Glob通配符(workspace使用说明可以查看网上教程)：

{
  "workspaces": [
    "packages/*",
  ]
}

第十步

在 button 目录下执行命令

 pnpm add @story/card                 // 最后才从本地查找速度慢
 或
 pnpm add @story/card  --workspace    // 直接从本地查找速度快

此时会发现 button 目录下会多出 node_modules 文件 内容为@story/card/… 即我们刚刚引入的 card 包
执行 node index.js 命令会发现我们的测试函数已经运行了
lizhengzheng@192 button % node index.js
这是@story/card组件

至此组件库的本地包关联完成，方便后续的测试，文档编写，demo 运行等

下一篇文章我们会讲到项目初始化以及环境配置