开发前端组件库的准备工作

安装 pnpm

我们使用 pnpm 作为包管理工具，使用 pnpm workspace 作为 monorepo 的管理工具

npm i pnpm -g 

初始化

pnpm init

创建 pnpm-workspace.yaml

touch pnpm-workspace.yaml

packages:
  - 'packages/*'

创建 tsconfig.json

touch tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "target": "es2016",
        "sourceMap": false,
        "module": "esnext",
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "strict": true,
        "jsx": "preserve",
        "lib": [
            "esnext",
            "dom"
        ],
        "rootDir": ".",
        "moduleResolution": "node"
    }
}

创建组件库需要的 package

mkdir packages
mkdir packages/components
mkdir packages/docs
mkdir packages/hooks
mkdir packages/theme-chalk
mkdir packages/utils

文档工具选型

• vue 使用 vitepress
• react 使用 docusaurus

cd packages/docs
npx create-docusaurus@latest

测试工具选型

• 单元测试使用 vitest
• 端到端测试使用 cypress