webflow-cli:code-component

Code Component

创建、构建并部署 React 组件到 Webflow Designer，并进行全面验证和部署确认。

重要提示

所有 Webflow CLI 操作都必须使用 Bash 工具：

• 通过 Bash 工具执行 webflow CLI 命令
• 使用 Read 工具检查生成的文件（切勿修改）
• 使用 Glob 工具发现项目文件
• 验证 CLI 是否已安装：webflow --version
• 检查身份验证：首次执行 webflow library share 时会自动进行工作区身份验证
• CLI 工作流中不要使用 Webflow MCP 工具
• 所有 CLI 命令都必须提供适当的描述（而非上下文参数）

包管理器检测：

• 检查锁文件：package-lock.json（npm）、pnpm-lock.yaml（pnpm）、yarn.lock（yarn）
• 如果未找到锁文件，请询问用户要使用哪个包管理器（npm/pnpm/yarn）
• 所有安装和构建命令都使用检测到的包管理器

说明

阶段 1：环境验证

1. 验证 CLI 已安装：运行 webflow --version，确认 CLI 已安装
2. 检查项目状态：确定用户是否已有 React 项目，或是否需要指导
3. 识别工作区：说明首次分享时会进行工作区身份验证
4. 检查配置：检查是否存在包含库配置的 webflow.json

阶段 2：项目配置

5. 询问操作类型：确认用户想要执行的操作：
   • 为现有 React 项目配置 Code Components
   • 将组件添加到已配置的项目
   • 构建并分享现有库
6. 配置 webflow.json：将库配置添加到 webflow.json：
   • 库名称（显示在 Webflow Designer 中）
   • 组件 glob 模式（例如，./src/**/*.webflow.tsx）
   • 可选的 bundleConfig，用于自定义 webpack
7. 读取配置文件：使用 Read 工具显示：
   • webflow.json — 库配置
   • package.json — 依赖项和脚本
   • 组件文件结构
8. 验证依赖项：确保已安装 React，并且存在构建脚本

阶段 3：构建与打包验证

9. 运行构建：执行用户的构建命令（例如，npm run build、yarn build）
10. 验证构建输出：检查是否存在构建错误或警告
11. 运行打包命令：执行 webflow library bundle 进行本地验证
12. 分析打包结果：
    • 打包大小（应小于 2 MB）
    • 包含的依赖项
    • 输出位置（默认值：./dist）
    • 验证警告
13. 预览打包详情：显示包含验证状态的打包摘要

阶段 4：预览与批准

14. 显示部署预览：
    • webflow.json 中的库名称
    • 包含的组件文件
    • 打包大小和验证状态
    • 目标工作区（首次分享时选择）
    • 首次操作时说明工作区身份验证
15. 说明部署流程：介绍分享库时会发生什么
16. 要求明确确认：用户必须输入“share”或“deploy”才能继续
17. 确认工作区：说明首次操作时浏览器会打开，以便选择工作区

阶段 5：部署与验证

18. 执行分享命令：运行 webflow library share
19. 监控部署：显示 CLI 输出和进度
20. 处理工作区身份验证：如果是首次操作，引导用户通过浏览器完成身份验证
21. 验证部署是否成功：确认库已显示在工作区中
22. 显示 .env 更新：说明已添加 WEBFLOW_WORKSPACE_ID 和 WEBFLOW_WORKSPACE_API_TOKEN
23. 提供后续步骤：
    • 如何在 Designer 中使用组件
    • 如何更新组件
    • 测试建议
    • 使用 webflow library log 进行调试

示例

示例 1：配置现有 React 项目

用户提示词：

I have a React project with some components I want to share to Webflow

步骤 1：环境验证

🔍 Webflow CLI Environment Check

Checking CLI installation...
✓ Webflow CLI installed: v1.5.2

Current directory: /Users/user/projects/my-components
✓ Found package.json with React project
✓ Found src/ directory with components

Checking webflow.json...
⚠️ No webflow.json found - needs configuration

Ready to configure for Code Components? (yes/no)

用户确认：是

步骤 2：项目配置

📋 Configure Code Components Library

I'll help you add the library configuration to webflow.json.

Questions:
1. What should your library be called in Webflow Designer?
   Example: "My Component Library"

2. Where are your component files located?
   Pattern examples:
   - "./src/**/*.webflow.tsx" (components with .webflow.tsx extension)
   - "./src/components/**/*.tsx" (all components in src/components/)
   - "./src/Button.tsx" (specific files)

Let me know the library name and component pattern.

用户提供：“Acme Components”和“./src/**/.webflow.tsx”*

Creating webflow.json configuration...

{
  "library": {
    "name": "Acme Components",
    "components": ["./src/**/*.webflow.tsx"]
  }
}

✓ Configuration ready

Found component files:
- src/Button.webflow.tsx
- src/Card.webflow.tsx
- src/Hero.webflow.tsx

Next: Build your components and run bundle command.

步骤 3：构建与捆绑验证

🔨 Building Components

What build command do you use? (e.g., npm run build, yarn build)

用户回复：npm run build

Executing: npm run build

Output:
✓ TypeScript compilation successful
✓ Components built to dist/

Creating bundle for validation...
Executing: webflow library bundle

Output:
✓ Analyzing 3 components
✓ Bundling dependencies
✓ Creating bundle
✓ Bundle created: dist/bundle.js

📦 Bundle Analysis:
- Size: 287 KB (✓ within 2MB limit)
- Components: 3 (Button, Card, Hero)
- Dependencies: [email protected], [email protected]
- Output: ./dist
- Validation: ✅ All checks passed

步骤 4：预览与批准

📋 Deployment Preview

Library: Acme Components
Components: 3 (Button, Card, Hero)
Bundle Size: 287 KB

Workspace Authentication:
⚠️ This appears to be your first deployment. When you run 'share':
1. Browser will open for workspace authentication
2. Select your target Webflow workspace
3. Grant access to deploy components
4. CLI will create .env with credentials:
   - WEBFLOW_WORKSPACE_ID
   - WEBFLOW_WORKSPACE_API_TOKEN

Validation Status: ✅ Ready to deploy
- Bundle size: ✓ 287 KB (< 2MB limit)
- Dependencies: ✓ Valid (React 18.2.0)
- Configuration: ✓ webflow.json valid
- Components: ✓ 3 components found

⚠️ Type "share" to deploy this library to your workspace.

用户确认：分享

步骤 5：部署与验证

🚀 Deploying Library

Executing: webflow library share

Output:
✓ Bundling library (287 KB)
✓ Opening browser for workspace authentication...

[Browser opens - user authenticates and selects workspace]

✓ Workspace authenticated: Acme Corp
✓ Uploading bundle
✓ Validating components
✓ Registering with workspace
✓ Library deployed successfully

✅ Library Deployed: Acme Components

Workspace: Acme Corp
Components: 3 (Button, Card, Hero)
Version: Latest
Status: Active

📁 Environment Updated:
Created .env file with:
- WEBFLOW_WORKSPACE_ID=workspace_abc123
- WEBFLOW_WORKSPACE_API_TOKEN=************

⚠️ Important: Add .env to your .gitignore file!

📋 Next Steps:
1. Open Webflow Designer
2. Go to Add Elements → Code Components
3. Find "Acme Components" in the list
4. Drag components onto canvas to use

💡 To update components:
1. Make changes to your component files
2. Run: npm run build
3. Run: webflow library share
   (No re-authentication needed - uses .env credentials)

🔍 For debugging:
- View logs: webflow library log
- Bundle locally: webflow library bundle
- Check bundle size: webflow library bundle --verbose

Component Library URL: https://webflow.com/dashboard/workspaces/acme-corp/components

示例 2：更新现有库

用户提示词：

Update my Code Components library with new changes

步骤 1：环境验证

🔍 Code Components Library Check

Checking configuration...
✓ webflow.json found with library config
✓ Library name: Acme Components
✓ Components pattern: ./src/**/*.webflow.tsx

Checking authentication...
✓ Found .env with workspace credentials
✓ Workspace: Acme Corp

Found components:
- src/Button.webflow.tsx (modified)
- src/Card.webflow.tsx
- src/Hero.webflow.tsx
- src/Form.webflow.tsx (new)

Ready to build and share updates? (yes/no)

步骤 2-3：构建与捆绑

🔨 Building Components

Executing: npm run build
✓ Build complete

Bundling for validation...
Executing: webflow library bundle

📦 Bundle Analysis:
- Size: 312 KB (✓ within 2MB limit)
- Components: 4 (Button, Card, Hero, Form) [+1 new]
- Changes: Button updated, Form added
- Validation: ✅ All checks passed

步骤 4：预览

📋 Update Preview

Library: Acme Components
Workspace: Acme Corp (already authenticated)

Changes:
✓ Button component (updated)
✓ Form component (new)
  Card component (unchanged)
  Hero component (unchanged)

Bundle Size: 312 KB (+25 KB from 287 KB)

No re-authentication needed - using existing workspace credentials.

⚠️ Type "share" to update the library.

步骤 5：部署

🚀 Updating Library

Executing: webflow library share

Output:
✓ Bundling library (312 KB)
✓ Using workspace: Acme Corp
✓ Uploading bundle
✓ Validating components
✓ Updating library
✓ Library updated successfully

✅ Library Updated: Acme Components

Changes deployed:
- Button: Updated ✨
- Form: Added 🆕
- Card: Unchanged
- Hero: Unchanged

💡 Refresh Webflow Designer to see changes:
1. Open Designer
2. Components may auto-refresh
3. Or refresh browser if needed

Components updated in workspace!

示例 3：首次测试捆绑包

用户提示词：

I want to test my bundle locally before sharing

步骤 1-2：验证与配置

🔍 Local Bundle Testing

✓ webflow.json configured
✓ Library: My Components
✓ Components: ./src/**/*.webflow.tsx

Running local bundle only (no deployment)...

步骤 3：捆绑包验证

🔨 Building Components

Executing: npm run build
✓ Build complete

Creating local bundle...
Executing: webflow library bundle

Output:
✓ Analyzing components
✓ Bundling dependencies
✓ Optimizing output
✓ Bundle created: dist/bundle.js

📦 Bundle Details:

Size: 1.2 MB (✓ within 2MB limit)

Components (5):
├── Button.webflow.tsx (25 KB)
├── Card.webflow.tsx (18 KB)
├── Hero.webflow.tsx (45 KB)
├── Form.webflow.tsx (32 KB)
└── Modal.webflow.tsx (28 KB)

Dependencies:
├── [email protected] (included)
├── [email protected] (included)
└── [email protected] (included)

Output Directory: ./dist/
- bundle.js (1.2 MB)
- manifest.json

Validation: ✅ All checks passed

💡 Bundle is valid and ready to share!
   Run: webflow library share (when ready to deploy)

示例 4：捆绑包过大

用户提示词：

Share my components library

捆绑包验证错误：

🔨 Building and Bundling

Executing: npm run build
✓ Build complete

Executing: webflow library bundle

Output:
✓ Analyzing components
✓ Bundling dependencies
⚠️ Bundle size check...

📦 Bundle Analysis:
- Size: 2.4 MB (❌ exceeds 2MB limit)
- Components: 6
- Dependencies: [email protected], [email protected], [email protected], [email protected]
- Validation: ❌ Issues found

❌ Bundle Too Large

Current size: 2.4 MB
Maximum allowed: 2 MB
Exceeded by: 400 KB

📊 Size Breakdown:
- React + React DOM: ~800 KB
- lodash: ~500 KB ⚠️
- moment: ~350 KB ⚠️
- Your components: ~750 KB

💡 Recommendations:
1. Remove lodash (use native JS instead)
   - Replace _.map with Array.map
   - Replace _.filter with Array.filter
   - Or use lodash-es and import specific functions

2. Replace moment with lighter alternative
   - Use date-fns (~15 KB vs 350 KB)
   - Or use native Intl.DateTimeFormat

3. Optimize component code
   - Remove unused imports
   - Enable tree-shaking
   - Split large components

4. Use external assets
   - Host large images externally
   - Use CDN for static assets

Would you like to:
1. Continue anyway (using --force flag, not recommended)
2. Review component imports to optimize
3. Cancel and fix manually

示例 5：CI/CD 部署

用户提示词：

How do I deploy in CI/CD pipeline?

回复：

🤖 CI/CD Deployment Setup

For automated deployments, use non-interactive mode with API tokens.

### Setup Steps:

1. **Get Workspace API Token**
   - Open Workspace Settings in Webflow
   - Go to Integrations → Workspace API Token
   - Generate new token
   - Copy token securely

2. **Add to CI/CD Secrets**
   - Add as environment variable: WORKSPACE_API_TOKEN
   - Never commit tokens to version control

3. **Deployment Command**
   ```bash
   webflow library share --api-token $WORKSPACE_API_TOKEN --no-input

示例：GitHub Actions

name: Deploy Components
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Install Webflow CLI
        run: npm install -g @webflow/webflow-cli

      - name: Build components
        run: npm run build

      - name: Deploy to Webflow
        run: |
          webflow library share \
            --api-token ${{ secrets.WORKSPACE_API_TOKEN }} \
            --no-input \
            --force
        env:
          WORKSPACE_API_TOKEN: ${{ secrets.WORKSPACE_API_TOKEN }}

多个工作区：

# Deploy to workspace 1
webflow library share \
  --api-token $WORKSPACE_1_TOKEN \
  --no-input

# Deploy to workspace 2
webflow library share \
  --api-token $WORKSPACE_2_TOKEN \
  --no-input

选项：

• --no-input - 禁用交互式提示
• --force - 即使有警告也继续
• --verbose - 显示详细输出
• --dev - 以开发模式捆绑（用于测试）

⚠️ 安全：

• 切勿提交 .env 文件
• 在 CI/CD 中使用密钥管理
• 定期轮换令牌
• 限制令牌权限

## Guidelines

### Phase 1: CLI Verification

**Installation Check:**
```bash
# Check if CLI is installed
webflow --version

# If not installed, guide user:
npm install -g @webflow/webflow-cli

项目检查：

# Check for existing configuration
ls webflow.json

# Check for React project
ls package.json

# Check for components
ls src/

身份验证说明： 与网站身份验证不同，Code Components 的工作区身份验证会在首次运行 webflow library share 时自动完成。CLI 将会：

1. 打开浏览器进行身份验证
2. 让用户选择工作区
3. 创建包含 WEBFLOW_WORKSPACE_ID 和 WEBFLOW_WORKSPACE_API_TOKEN 的 .env 文件

阶段 2：项目配置

webflow.json 结构：

{
  "library": {
    "name": "<Your Library Name>",
    "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
    "bundleConfig": "./webpack.webflow.js"
  }
}

配置字段：

• name（必填）：在 Webflow Designer 中显示的库名称
• components（必填）：用于匹配组件文件的 Glob 模式
  • 示例："./src/**/*.webflow.tsx" - src/ 中所有 .webflow.tsx 文件
  • 示例："./src/components/**/*.tsx" - src/components/ 中所有 .tsx 文件
• bundleConfig（可选）：自定义 webpack 配置的路径

组件命名约定：

• 在扩展名前添加 .webflow：Button.webflow.tsx
• 或使用 Glob 模式包含特定目录中的所有文件
• 组件必须是 React 组件

没有 Init 命令： 与其他 CLI 产品不同，Code Components 没有 init 命令。用户可以通过添加包含库配置的 webflow.json 来配置现有 React 项目。

阶段 3：构建与捆绑

构建流程：

# Use project's build script
npm run build
# or
yarn build
# or
pnpm build

# Check for errors
echo $?  # 0 = success, non-zero = failure

捆绑命令：

# Bundle locally (optional - for testing/validation)
webflow library bundle

# Bundle output: ./dist/ (default)
# Can override: webflow library bundle --output-path ./build

捆绑选项：

• --output-path <path> - 覆盖输出目录（默认：./dist）
• --public-path <path> - 覆盖公共路径
• --force - 即使有警告也强制捆绑
• --debug-bundler - 显示 webpack 配置
• --dev - 以开发模式捆绑
• --verbose - 显示详细输出

捆绑验证： 检查以下方面：

• 大小限制：必须小于 2MB
• 依赖项：React 版本兼容
• 输出：捆绑包已在 dist/ 目录中创建
• 组件：已包含所有组件文件

常见构建错误：

• TypeScript 编译错误 → 修复类型问题
• 缺少依赖项 → 运行 npm install
• 导入错误 → 检查文件路径
• 捆绑包过大 → 优化依赖项

阶段 4：部署预览

预览格式：

📋 Deployment Preview

Library: [Name from webflow.json]
Components: [Count] ([List of components])
Bundle Size: [Size in KB/MB]

Workspace Authentication:
[First time: Explain browser auth flow]
[Subsequent: Show workspace from .env]

Validation Status:
✓ Bundle size: [X KB] (< 2MB limit)
✓ Dependencies: Valid
✓ Configuration: webflow.json valid
✓ Components: [N] components found

⚠️ Type "share" to proceed

首次身份验证： 清楚说明：

1. 浏览器将会打开
2. 用户通过 Webflow 进行身份验证
3. 用户选择目标工作区
4. CLI 创建包含凭据的 .env 文件
5. 后续分享将使用这些凭据（无需重新验证）

阶段 5：部署执行

分享命令：

# Standard share (interactive)
webflow library share

# Non-interactive (for CI/CD)
webflow library share --api-token <TOKEN> --no-input

# Force share (ignore warnings)
webflow library share --force

# Development mode
webflow library share --dev

分享选项：

• --manifest - webflow.json 的路径（默认：扫描当前目录）
• --api-token - 工作区 API 令牌（用于 CI/CD）
• --no-input - 禁用交互式提示
• --force - 即使有警告也强制打包
• --debug-bundler - 显示打包器配置
• --dev - 在开发模式下打包
• --verbose - 显示详细输出

成功标志：

• Bundle 已成功上传
• 库已注册到工作区
• 组件已在 Designer 中可用
• 已创建/更新 .env 文件（首次操作时）

环境文件（.env）： 首次成功分享后：

WEBFLOW_WORKSPACE_ID=your-workspace-id
WEBFLOW_WORKSPACE_API_TOKEN=your-api-token

⚠️ 重要：务必将 .env 添加到 .gitignore！

验证步骤：

1. 检查 CLI 输出中的成功消息
2. 确认已创建 .env 文件（首次操作时）
3. 提供 Designer 访问说明
4. 显示工作区仪表板 URL

阶段 6：调试

日志命令：

# Show latest log file location
webflow library log

# Example output:
# Latest log: /Users/user/.webflow/logs/library-2024-01-20-15-30-45.log

在以下情况下使用此命令：

• Bundle 失败且错误信息不明确
• 分享命令产生警告
• 需要调试 webpack 配置
• 调查依赖项问题

常见问题：

问题："Could not find webflow.json"

❌ Configuration Not Found

The CLI couldn't find webflow.json in the current directory.

Solution:
1. Ensure you're in the project root
2. Create webflow.json with library configuration:
   {
     "library": {
       "name": "Your Library Name",
       "components": ["./src/**/*.webflow.tsx"]
     }
   }
3. Run command again

问题："No components found"

❌ No Components Found

The components glob pattern didn't match any files.

Current pattern: "./src/**/*.webflow.tsx"

Solution:
1. Check component files have correct naming
2. Verify glob pattern in webflow.json
3. Common patterns:
   - "./src/**/*.webflow.tsx" (requires .webflow in name)
   - "./src/components/**/*.tsx" (all tsx in folder)
   - "./src/Button.tsx" (specific file)

Found files:
- src/Button.tsx (not matching pattern)
- src/Card.tsx (not matching pattern)

Suggestion: Rename to Button.webflow.tsx or update pattern

错误处理

未安装 CLI：

❌ Webflow CLI Not Found

The Webflow CLI is required for Code Components.

Installation:
npm install -g @webflow/webflow-cli

After installation, verify:
webflow --version

Documentation: https://developers.webflow.com/cli

构建失败：

❌ Build Failed

Error: [Specific error message]

Common Fixes:
- TypeScript errors: Review type definitions
- Missing deps: Run npm install
- Import errors: Check file paths
- Syntax errors: Check React component syntax

Show build output for details.
Need help? Run: webflow library log

Bundle 失败：

❌ Bundle Failed

Error: [Specific error from CLI]

Common Causes:
- Invalid component files
- Webpack configuration errors
- Dependency conflicts
- File path issues

View detailed logs: webflow library log

Possible solutions:
1. Check component file syntax
2. Verify webflow.json configuration
3. Remove bundleConfig to use defaults
4. Check dependencies in package.json

部署失败：

❌ Share Failed

Error: [Specific error from CLI]

Possible Causes:
- Network connection issues
- Workspace authentication expired
- Bundle validation failed
- Workspace permissions

Solutions:
1. Check internet connection
2. Re-authenticate: Remove .env and run share again
3. Fix bundle issues: Run webflow library bundle first
4. Verify workspace access in Webflow dashboard

Retry share? (yes/no)

文件操作

读取文件： 始终使用 Read 工具（绝不修改）：

# View library configuration
Read: webflow.json

# View package dependencies
Read: package.json

# View component source
Read: src/Button.webflow.tsx

# View environment (if exists)
Read: .env

查找文件： 使用 Glob 工具查找文件：

# Find all webflow components
Glob: **/*.webflow.tsx

# Find configuration files
Glob: *.json

# Find source files
Glob: src/**/*

# Find build output
Glob: dist/**/*

绝不使用 Write/Edit 工具：

• 不要使用 Write 创建 webflow.json（向用户展示其结构）
• 不要修改组件文件
• 不要编辑 package.json
• 让用户自行修改文件
• 只读取文件以展示内容

进度指示

打包时：

🔄 Bundling Components...

Analyzing components... ✓
Resolving dependencies... ✓
Building bundle... ⏳
Optimizing... ⏳

Elapsed: 8s

部署时：

🚀 Sharing Library...

Creating bundle... ✓
Uploading to workspace... ⏳
Validating components... ⏳

Uploaded: 287 KB
Elapsed: 12s

安全模式

确认关键词：

• "share" - 将库分享到工作区
• "deploy" - "share" 的替代说法
• "proceed" - 继续操作
• "cancel" - 取消操作
• "skip" - 跳过可选步骤

分享前预览： 始终显示：

• 将要分享的内容（库名称、组件）
• 分享目标（工作区，或首次操作时需进行身份验证）
• Bundle 大小和验证状态
• 更改影响（新增/更新的组件）

透明度：

• 执行前显示所有 CLI 命令
• 完整显示 CLI 输出
• 清楚报告成功/失败
• 提供故障排除指南
• 显示用于调试的日志位置

最佳实践

组件开发：

• 使用 TypeScript 确保类型安全
• 遵循 React 最佳实践
• 控制 Bundle 大小（理想情况下小于 1 MB）
• 使用 .webflow 扩展名命名文件，以便识别
• 记录组件属性

依赖管理：

• 尽量减少依赖项
• 避免使用大型库（lodash、moment）
• 使用支持 tree-shaking 的包
• 检查 Bundle 影响：webflow library bundle --verbose
• 将 React 设为 peer dependencies（不打包）

更新和版本控制：

• 分享前先构建
• 在本地测试 Bundle：webflow library bundle
• 通过分享进行更新：webflow library share
• 无需版本号（始终为 "latest"）
• 部署后在 Designer 中测试

工作区管理：

• 每个 .env 文件对应一个工作区
• 多个工作区请使用 --api-token
• 将 .env 添加到 .gitignore
• 在 CI/CD 中轮换令牌
• 记录已配置的工作区

配置：

• 将 webflow.json 保存在项目根目录
• 使用清晰的库名称
• 使用具体的组件 glob 模式
• 仅在需要时添加 bundleConfig
• 对 webflow.json 进行版本控制（不要对 .env 进行版本控制）

组件生命周期

初始设置：

1. 创建或准备 React 项目
2. 添加包含库配置的 webflow.json
3. 为组件文件命名（例如，.webflow.tsx）
4. 构建：npm run build
5. 测试打包：webflow library bundle
6. 分享：webflow library share（首次使用时会先进行身份验证）

更新：

1. 编辑组件源文件
2. 构建：npm run build
3. 分享：webflow library share（使用已保存的凭据）
4. 刷新 Designer 以查看更改

测试：

1. 在本地打包：webflow library bundle
2. 检查打包大小和验证结果
3. 修复所有问题
4. 准备就绪后分享：webflow library share
5. 打开 Webflow Designer
6. 将组件添加到页面
7. 测试功能

调试：

1. 查看日志：webflow library log
2. 使用详细模式打包：webflow library bundle --verbose
3. 检查配置：cat webflow.json
4. 验证构建：npm run build
5. 在开发模式下测试：webflow library share --dev

CLI 命令参考

安装：

# Install CLI globally
npm install -g @webflow/webflow-cli

# Verify installation
webflow --version

库命令：

# Bundle locally (testing/validation)
webflow library bundle [options]

# Share to workspace (bundle + deploy)
webflow library share [options]

# View latest log file
webflow library log

打包选项：

# Custom output path
webflow library bundle --output-path ./build

# Force bundling (ignore warnings)
webflow library bundle --force

# Development mode
webflow library bundle --dev

# Show bundler config
webflow library bundle --debug-bundler

# Verbose output
webflow library bundle --verbose

分享选项：

# Standard interactive share
webflow library share

# Non-interactive (CI/CD)
webflow library share --no-input --api-token <TOKEN>

# Force share (ignore warnings)
webflow library share --force

# Development mode
webflow library share --dev

# Custom manifest location
webflow library share --manifest ./config/webflow.json

全局选项：

# Show version
webflow --version

# Show help
webflow --help
webflow library --help
webflow library share --help

快速参考

工作流： 配置 webflow.json → 构建 → 打包 → 分享

关键命令：

• webflow library bundle - 在本地打包以进行测试
• webflow library share - 打包并部署到工作区
• webflow library log - 查看调试日志

配置： webflow.json 中的 library 部分

身份验证： 首次运行 webflow library share 时自动进行（会打开浏览器）

环境： .env 中的 WEBFLOW_WORKSPACE_ID 和 WEBFLOW_WORKSPACE_API_TOKEN

验证： 务必先检查 webflow --version

预览： 分享前显示打包详情

确认： 需要输入“share”关键字才能继续

文档： https://developers.webflow.com/code-components/introduction