Webstudio CLI 使用指南：本地开发与云端同步全解析
前言
Webstudio CLI 是一个强大的命令行工具，它架起了本地开发环境与 Webstudio 云平台之间的桥梁。通过这个工具，开发者可以轻松地将云端的 Webstudio 项目同步到本地，进行开发和构建，然后再将更改同步回云端。本文将详细介绍如何安装和使用 Webstudio CLI，帮助开发者高效地管理 Webstudio 项目。
环境准备
Node.js 安装
Webstudio CLI 基于 Node.js 运行，因此首先需要确保系统中安装了 Node.js 环境。推荐使用 Node.js 18 或更高版本。
通过 NVM 安装（推荐）
NVM (Node Version Manager) 是一个便捷的 Node.js 版本管理工具，可以轻松切换不同版本的 Node.js。安装步骤如下：
-
安装 NVM：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash -
安装 Node.js 18：
nvm install 18 -
验证安装：
node --version
Webstudio CLI 安装与配置
全局安装 CLI
通过 npm 全局安装最新版本的 Webstudio CLI：
npm install -g webstudio@latest
安装完成后，可以通过以下命令验证安装是否成功：
webstudio --version
保持 CLI 更新
当有新版本发布时，只需重新运行安装命令即可更新：
npm install -g webstudio@latest
项目初始化与管理
启动新项目
在项目目录下运行以下命令，CLI 将引导你完成项目初始化流程：
webstudio
这个交互式流程会帮助你：
- 连接到 Webstudio 云平台项目
- 同步项目文件到本地
- 构建项目基础结构
独立命令操作
除了交互式流程外，CLI 还提供了一系列独立命令，方便开发者灵活控制项目：
项目链接 (link)
将本地项目与云端项目建立关联：
webstudio link
执行此命令后，CLI 会提示你输入从 Webstudio 云平台生成的分享链接（通过项目中的"分享"选项获取）。注意：生成链接时需要确保有"构建"权限。
项目同步 (sync)
将云端已发布的更改同步到本地项目：
webstudio sync
重要提示：在执行同步前，请确保已在 Webstudio 云平台发布了项目更改。
项目构建 (build)
构建本地项目：
webstudio build
构建过程会：
- 创建必要的路由和页面
- 使用默认的 Remix 模板搭建应用框架
- 下载所有资源（图片、字体等）到
public/assets目录
构建完成后，可以运行以下命令启动开发服务器：
npm install
npm run dev
如需构建生产版本：
npm run build
项目部署指南
Vercel 部署
-
首先安装 Vercel CLI：
npm install -g vercel -
部署项目：
vercel deploy
注意：如果使用了 vercel build 命令，部署后建议清理项目中的 app 文件夹，因为 Vercel 会自动注入一些支持文件。
Netlify 部署
-
安装 Netlify CLI：
npm install -g netlify-cli -
部署项目：
netlify deploy
部署目标配置
在项目初始化时可以选择部署目标（Netlify 无服务器函数或边缘函数）。如需后期更改，可以使用：
- 无服务器函数：
webstudio build --template netlify
最佳实践与注意事项
- 同步时机：确保在云平台发布更改后再执行本地同步操作
- 构建环境：开发环境使用
npm run dev，生产环境使用npm run build - 资源管理：所有资源文件会自动下载到
public/assets目录 - 部署清理：使用 Vercel 部署后记得清理自动生成的文件
- 版本控制：建议将项目纳入版本控制系统，但忽略自动生成的构建文件
通过 Webstudio CLI，开发者可以轻松实现云端与本地开发环境的无缝衔接，大大提高开发效率和协作便利性。随着项目的迭代，CLI 还将支持更多部署目标和功能，为开发者提供更完善的工作流程。
