mcpField
W
webflow-code-component:local-dev-setup

webflow-code-component:local-dev-setup

github.com/webflow开发1331.0k 次安装2 天前更新
代码仓库

关于 webflow-code-component:local-dev-setup

webflow-code-component:local-dev-setup 指导开发者从零搭建 Webflow Code Components 项目，或将其加入现有 React 项目。内容涵盖依赖安装、配置、起始文件创建及本地构建验证。

主要功能

  1. 01初始化新项目或扩展现有项目
  2. 02安装核心与 Webflow 依赖
  3. 03配置 webflow.json 和 TypeScript
  4. 04创建起始组件文件
  5. 05验证本地 Bundle

适用场景

  1. 01启动 Webflow Code Components 项目
  2. 02将 Webflow 组件加入 React 项目
  3. 03为组件配置 Next.js 或 Vite 项目
  4. 04部署前检查项目配置

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:local-dev-setup

安装后在 Claude Code 中输入/webflow-code-component:local-dev-setup确认已加载。

附带文件references/EXAMPLES.md

详细介绍

本地开发环境设置

从头开始设置新的 Webflow Code Components 项目。

适用场景

适用于：

  • 启动全新的代码组件项目
  • 用户要求设置、初始化或创建新项目
  • 将代码组件添加到现有 React 项目
  • 首次设置开发环境

不适用于：

  • 项目已存在且配置完成（直接回答问题即可）
  • 创建单个组件（改用 component-scaffold）
  • 部署组件（改用 deploy-guide）

说明

阶段 1：评估当前状态

  1. 检查项目是否存在：

    • 是否已有 package.json？
    • 是否已有 webflow.json？
    • 当前项目结构是什么？

  2. 确定设置类型：

    • 从头开始创建新项目
    • 添加到现有 React 项目
    • 添加到现有 Next.js/Vite 项目
阶段 2：初始化项目

  1. 创建项目结构（如果是新项目）：

    • 初始化 npm 项目
    • 设置 TypeScript
    • 创建文件夹结构

  2. 安装依赖项：

    • 核心依赖：React、TypeScript
    • Webflow：CLI、data-types、react utils
    • 可选：样式库
阶段 3：配置

  1. 创建 webflow.json：

    • 设置库名称
    • 配置组件 glob 模式
    • 根据需要设置全局项

  2. 配置 TypeScript：

    • 设置 tsconfig.json
    • 启用 JSX 支持
阶段 4：创建初始文件

  1. 创建示例组件：

    • 简单的 Button 组件
    • 定义文件
    • 基本样式

  2. 创建全局文件（可选）：

    • 用于共享样式
    • 用于装饰器
阶段 5：验证设置

  1. 验证打包是否成功：

    • 运行 npx webflow library bundle --public-path http://localhost:4000/，在本地检查构建错误
    • 这可以验证组件、导入项和配置是否正确
    • 要在 Webflow Designer 中进行完整测试，需要运行 npx webflow library share 部署

  2. 提供后续步骤：

    • 如何创建更多组件
    • 如何部署
    • 开发工作流

示例

详细的分步示例请参阅 references/EXAMPLES.md。

可用示例：

  1. 从头开始创建新项目 - 使用 React、TypeScript 和 CSS Modules 完成完整设置
  2. 添加到现有 React 项目 - 将代码组件集成到现有代码库
  3. 使用 Tailwind CSS - 设置 Tailwind CSS 支持

快速入门（新项目）：

# 1. Create project
mkdir my-webflow-components && cd my-webflow-components
npm init -y

# 2. Install dependencies
npm install react react-dom
npm install -D typescript @types/react @types/react-dom
npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react

# 3. Create webflow.json
echo '{"library":{"name":"My Library","components":["./src/**/*.webflow.tsx"]}}' > webflow.json

# 4. Create component directory
mkdir -p src/components/Button

然后创建组件文件（.tsx、.webflow.tsx、.module.css）。完整文件内容（包括组件、定义和 CSS 文件）请参阅 references/EXAMPLES.md 中的示例 1。

使用以下命令部署：

npx webflow library share

验证

设置完成后，验证项目配置是否正确：

检查项验证方法
项目根目录中存在 webflow.jsoncat webflow.json
已安装依赖项npm list @webflow/webflow-cli
打包未出现错误npx webflow library bundle --public-path http://localhost:4000/
至少找到一个组件检查打包输出中是否有 "Found N component(s)"

指南

最低要求

每个代码组件项目都需要：

  1. 包含依赖项的 package.json
  2. 包含库配置的 webflow.json
  3. tsconfig.json（用于 TypeScript）
  4. 至少一个 .webflow.tsx 文件
推荐结构
project/
├── src/
│   ├── components/
│   │   └── [ComponentName]/
│   │       ├── [ComponentName].tsx
│   │       ├── [ComponentName].webflow.tsx
│   │       └── [ComponentName].module.css
│   ├── hooks/           # Custom hooks
│   ├── utils/           # Utilities
│   ├── declarations.d.ts # CSS module types
│   ├── globals.ts       # Decorators/global imports
│   └── globals.css      # Global styles
├── package.json
├── tsconfig.json
├── webflow.json
└── .gitignore
开发工作流
  1. 创建组件：使用 component-scaffold 技能
  2. 本地开发：运行 React 项目进行迭代（例如，npm run dev）
  3. 验证：使用 pre-deploy-check 技能
  4. 部署：使用 deploy-guide 技能，或运行 npx webflow library share
  5. 在 Webflow 中测试：在 Designer 中将组件添加到页面

评论

支持 Markdown