项目 Monorepo 项目 (opens new window)

基础配置

# 创建项目目录
mkdir frontend-frameworks
cd frontend-frameworks

# 初始化项目
pnpm init

# 创建必要的目录
mkdir apps packages

配置基础文件

# 创建 pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'

# 创建 package.json (根目录)
{
  "name": "frontend-frameworks",
  "private": true,
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build",
    "lint": "turbo run lint",
    "clean": "turbo run clean"
  }
}

# 创建 turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false
    }
  }
}

子项目创建

React项目

cd apps
pnpm create vite react-app --template react-ts
cd react-app
pnpm install

cd apps
pnpm create vite vue3-app --template vue-ts
cd vue3-app
pnpm install

其他框架

# Svelte
pnpm create vite svelte-app --template svelte-ts

# Solid
pnpm create vite solid-app --template solid-ts

# Qwik
pnpm create qwik

常用命令参考

# 清理所有 node_modules
pnpm clean

# 重新安装所有依赖
pnpm install

# 链接工作区依赖
pnpm link

# 添加共享依赖
pnpm add @your-org/shared -w

# 运行特定脚本
pnpm run <script-name>

目录结构参考

frontend-frameworks/
├── package.json
├── pnpm-workspace.yaml
├── turbo.json
├── apps/
│   ├── react-app/
│   ├── vue3-app/
│   ├── svelte-app/
│   ├── solid-app/
│   └── qwik-app/
└── packages/
    ├── shared-ui/
    └── utils/

Rollup SDK 构建与发布指南

1. 项目初始化

1.1 基础设置

# 创建项目目录
mkdir rollup-sdk && cd rollup-sdk

# 初始化 package.json
pnpm init

# 安装依赖
pnpm add -D rollup @rollup/plugin-babel @rollup/plugin-commonjs \
  @rollup/plugin-node-resolve @rollup/plugin-typescript \
  @rollup/plugin-terser typescript rimraf

1.2 配置文件

# 创建必要的配置文件
touch rollup.config.mjs tsconfig.json .npmrc

依赖管理

# 根目录依赖
pnpm add -D turbo typescript prettier -w

# 安装子项目依赖
pnpm --filter react-app add react-router-dom
pnpm --filter vue3-app add vue-router

运行命令

# 运行所有项目
pnpm dev

# 运行特定项目
pnpm --filter react-app dev

# 构建项目
pnpm build

2. 项目结构

rollup-sdk/
├── src/
│   └── index.ts      # 源代码入口
├── dist/             # 构建输出目录
├── rollup.config.mjs # Rollup 配置
├── tsconfig.json     # TypeScript 配置
├── package.json      # 包配置
└── .npmrc           # npm 配置

3. 关键配置

3.1 package.json

{
  "name": "your-package-name",     // 包名（确保唯一）
  "version": "0.1.0",
  "main": "dist/index.js",        // CommonJS 输出
  "module": "dist/index.esm.js",  // ES Module 输出
  "types": "dist/index.d.ts",     // TypeScript 类型声明
  "files": ["dist"],              // 发布文件
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rimraf dist && rollup -c",
    "clean": "rimraf dist"
  }
}

3.2 .npmrc

registry=https://registry.npmmirror.com/
publish-registry=https://registry.npmjs.org/

4. 构建流程

4.1 开发构建

# 开发模式（支持热重载）
pnpm dev

4.2 生产构建

# 清理之前的构建
pnpm clean

# 构建
pnpm build

5. 发布流程

5.1 发布前准备

# 切换到 npm 官方源
npm config set registry https://registry.npmjs.org/

# 登录 npm 账号
npm login

# 确认登录状态
npm whoami

5.2 选择包名策略

普通包名

• 使用唯一的包名，如：your-name-package-name
• package.json 配置：

{
  "name": "your-name-package-name"
}

作用域包名

• 需要先在 npm 网站创建组织或确认个人作用域
• package.json 配置：

{
  "name": "@your-scope/package-name",
  "publishConfig": {
    "access": "public"
  }
}

5.3 执行发布

# 构建
pnpm build

# 发布
npm publish --access public  # 作用域包需要 --access public

6. 发布后验证

# 检查包信息
npm view your-package-name

# 安装测试
npm install your-package-name

# 或者作用域包
npm install @your-scope/package-name

7. 常见问题处理

7.1 包名冲突

• 使用更独特的包名
• 添加作用域前缀
• 使用组织名称

7.2 发布权限问题

• 确认已正确登录
• 检查包名是否可用
• 验证作用域权限

7.3 Registry 问题

• 确保使用正确的 registry
• 检查 .npmrc 配置
• 验证发布源设置

8. 发布检查清单

• [ ] package.json 版本号已更新
• [ ] 所有依赖都已正确安装
• [ ] 构建成功且输出文件正确
• [ ] npm 登录状态正常
• [ ] 包名唯一且符合规范
• [ ] 已切换到正确的 registry
• [ ] 确认发布权限配置