mirror of
https://github.com/stackblitz/bolt.new
synced 2025-06-26 18:17:50 +00:00
增加 cn readme
This commit is contained in:
zyh
parent
08fc526945
commit
228567bdcb
195
README_CN.md
Normal file
195
README_CN.md
Normal file
@ -0,0 +1,195 @@
|
||||
# Bolt 开源代码库
|
||||
|
||||
|
||||
|
||||
> 欢迎来到 **Bolt** 开源代码库! 本仓库包含了一个使用 bolt.new 核心组件的简单示例应用,旨在帮助你开始构建基于 StackBlitz 的 **WebContainer API** 驱动的 **AI 驱动软件开发工具**。
|
||||
|
||||
### 为什么选择 Bolt + WebContainer API 进行开发
|
||||
|
||||
通过使用 Bolt + WebContainer API 构建,你可以创建基于浏览器的应用程序,让用户直接在浏览器中**提示、运行、编辑和部署**全栈 Web 应用,无需虚拟机。借助 WebContainer API,你可以构建应用程序,让 AI 直接访问和完全控制用户浏览器标签页内的 **Node.js 服务器**、**文件系统**、**包管理器**和**开发终端**。这种强大的组合允许你创建一种新类型的开发工具,支持所有主流 JavaScript 库和 Node 包,无需远程环境或本地安装即可开箱即用。
|
||||
|
||||
### Bolt(本仓库)与 [Bolt.new](https://bolt.new) 有什么区别?
|
||||
|
||||
- **Bolt.new**: 这是 StackBlitz 的**商业产品** - 一个托管的、基于浏览器的 AI 开发工具,使用户能够直接在浏览器中提、运行、编辑和部署全栈 Web 应用程序。它基于 [Bolt 开源仓库](https://github.com/stackblitz/bolt.new) 构建,并由 StackBlitz 的 **WebContainer API** 提供支持。
|
||||
|
||||
- **Bolt(本仓库)**: 这个开源仓库提供了用于构建 **Bolt.new** 的核心组件。该仓库包含 Bolt 的 UI 界面以及使用 [Remix Run](https://remix.run/) 构建的服务器组件。通过利用这个仓库和 StackBlitz 的 **WebContainer API**,你可以创建自己的 AI 驱动的开发工具和完全在浏览器中运行的全栈应用程序。
|
||||
|
||||
# 开始使用 Bolt 进行开发
|
||||
|
||||
Bolt 将 AI 的能力与沙盒化的开发环境相结合,创造了一种协作体验,让代码可以由助手和程序员共同开发。Bolt 结合了 [WebContainer API](https://webcontainers.io/api)、[Claude Sonnet 3.5](https://www.anthropic.com/news/claude-3-5-sonnet)、[Remix](https://remix.run/) 和 [AI SDK](https://sdk.vercel.ai/)。
|
||||
|
||||
### WebContainer API
|
||||
|
||||
Bolt 使用 [WebContainers](https://webcontainers.io/) 在浏览器中运行生成的代码。WebContainers 为 Bolt 提供了一个使用 [WebContainer API](https://webcontainers.io/api) 的全栈沙盒环境。WebContainers 直接在浏览器中运行全栈应用程序,无需云托管 AI 代理的成本和安全隐患。WebContainers 是交互式和可编辑的,使 Bolt 的 AI 能够运行码并理解用户的任何更改。
|
||||
|
||||
[WebContainer API](https://webcontainers.io) 对个人和开源使用是免费的。如果你正在构建商业用途的应用程序,可以在[这里](https://stackblitz.com/pricing#webcontainer-api)了解更多关于我们的 WebContainer API 商业使用定价。
|
||||
|
||||
### Remix 应用
|
||||
|
||||
Bolt 使用 [Remix](https://remix.run/) 构建,并使用 [CloudFlare Pages](https://pages.cloudflare.com/) 和 [CloudFlare Workers](https://workers.cloudflare.com/) 部署。
|
||||
|
||||
### AI SDK 集成
|
||||
|
||||
Bolt 使用 [AI SDK](https://github.com/vercel/ai) 与 AI 模型集成。目前,Bolt 支持使用 Anthropic 的 Claude Sonnet 3.5。
|
||||
你可以从 [Anthropic API 控制台](https://console.anthropic.com/) 获取 API 密钥以在 Bolt 中使用。
|
||||
看看 [Bolt 如何使用 AI SDK](https://github.com/stackblitz/bolt.new/tree/main/app/lib/.server/llm)
|
||||
|
||||
## 先决条件
|
||||
|
||||
在开始之前,请确保已安装以下内容:
|
||||
|
||||
- Node.js (v20.15.1)
|
||||
- pnpm (v9.4.0)
|
||||
|
||||
## 设置
|
||||
|
||||
1. 克隆仓库(如果你还没有):
|
||||
|
||||
```bash
|
||||
git clone https://github.com/stackblitz/bolt.new.git
|
||||
```
|
||||
|
||||
2. 安装依赖:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
3. 在根目录创建一个 `.env.local` 文件,并添加你的 Anthropic API 密钥:
|
||||
|
||||
ANTHROPIC_API_KEY=XXX
|
||||
|
||||
|
||||
可选地,你可以设置调试级别:
|
||||
|
||||
VITE_LOG_LEVEL=debug
|
||||
|
||||
|
||||
**重要**: 永不要将你的 `.env.local` 文件提交到版本控制。它已经包含在 .gitignore 中。
|
||||
|
||||
## 项目结构
|
||||
|
||||
以下是 Bolt 项目的详细目录结构:
|
||||
|
||||
```
|
||||
bolt.new/
|
||||
├── app/
|
||||
│ ├── components/
|
||||
│ │ ├── chat/ # 聊天相关组件
|
||||
│ │ ├── editor/ # 编辑器相关组件
|
||||
│ │ ├── header/ # 头部组件
|
||||
│ │ ├── sidebar/ # 侧边栏组件
|
||||
│ │ ├── ui/ # 通用UI组件
|
||||
│ │ └── workbench/ # 工作台组件
|
||||
│ ├── lib/
|
||||
│ │ ├── .server/
|
||||
│ │ │ └── llm/ # 语言模型相关代码
|
||||
│ │ │ ├── api-key.ts # API密钥处理
|
||||
│ │ │ ├── base-url.ts # 基础URL配置
|
||||
│ │ │ ├── constants.ts # 常量定义
|
||||
│ │ │ ├── model.ts # 模型配置
|
||||
│ │ │ ├── prompts.ts # 提示词模板
|
||||
│ │ │ ├── stream-text.ts # 文本流处理
|
||||
│ │ │ └── switchable-stream.ts # 可切换流实现
|
||||
│ │ ├── ai/ # AI 相关功能
|
||||
│ │ ├── hooks/ # React hooks
|
||||
│ │ ├── persistence/ # 数据持久化
|
||||
│ │ ├── runtime/ # 运行时相关代码
|
||||
│ │ └── stores/ # 状态管理
|
||||
│ ├── routes/ # Remix 路由
|
||||
│ ├── styles/
|
||||
│ │ ├── components/ # 组件特定样式
|
||||
│ │ └── index.scss # 主样式文件
|
||||
│ └── utils/ # 工具函数
|
||||
├── public/ # 静态资源
|
||||
│ └── icons/ # 图标文件
|
||||
├── types/ # TypeScript 类型定义
|
||||
├── .editorconfig # 编辑器配置
|
||||
├── .env.example # 环境变量示例
|
||||
├── .eslintignore # ESLint 忽略配置
|
||||
├── .gitignore # Git 忽略配置
|
||||
├── .prettierignore # Prettier 忽略配置
|
||||
├── .prettierrc # Prettier 配置
|
||||
├── eslint.config.mjs # ESLint 配置
|
||||
├── package.json # 项目依赖和脚本
|
||||
├── pnpm-lock.yaml # pnpm 锁文件
|
||||
├── README.md # 英文说明文档
|
||||
├── README_CN.md # 中文说明文档
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
├── uno.config.ts # UnoCSS 配置
|
||||
└── vite.config.ts # Vite 配置文件
|
||||
|
||||
|
||||
主要目录和文件说明:
|
||||
|
||||
- `app/`: 包含应用程序的主要源代码。
|
||||
- `components/`: 包含所有 React 组件,按功能分类。
|
||||
- `lib/`: 包含核心库和工具。
|
||||
- `.server/`: 包含服务器端代码。
|
||||
- `llm/`: 语言模型相关代码。
|
||||
- `api-key.ts`: 处理 API 密钥的逻辑。
|
||||
- `base-url.ts`: 配置基础 URL。
|
||||
- `constants.ts`: 定义常量。
|
||||
- `model.ts`: 配置和初始化语言模型。
|
||||
- `prompts.ts`: 定义系统提示和其他提示模板。
|
||||
- `stream-text.ts`: 处理文本流的逻辑。
|
||||
- `switchable-stream.ts`: 实现可切换的流。
|
||||
- `ai/`: 包含 AI 相关功能。
|
||||
- `hooks/`: 包含自定义 React hooks。
|
||||
- `persistence/`: 包含数据持久化相关代码。
|
||||
- `runtime/`: 包含运行时相关代码。
|
||||
- `stores/`: 包含状态管理相关代码。
|
||||
- `routes/`: 包含 Remix 路由定义。
|
||||
- `styles/`: 包含全局样式文件和组件特定样式。
|
||||
- `utils/`: 包含通用工具函数。
|
||||
- `public/`: 包含静态资源文件,如图标。
|
||||
- `types/`: 包含 TypeScript 类型定义。
|
||||
- 根目录下的配置文件:
|
||||
- `.editorconfig`: 编辑器配置文件。
|
||||
- `.env.example`: 环境变量示例文件。
|
||||
- `.eslintignore` 和 `eslint.config.mjs`: ESLint 相关配置。
|
||||
- `.gitignore`: Git 忽略文件配置。
|
||||
- `.prettierignore` 和 `.prettierrc`: Prettier 代码格式化配置。
|
||||
- `package.json`: 项目依赖和脚本定义。
|
||||
- `tsconfig.json`: TypeScript 配置文件。
|
||||
- `uno.config.ts`: UnoCSS 配置文件。
|
||||
- `vite.config.ts`: Vite 构建工具的配置文件。
|
||||
|
||||
## 可用脚本
|
||||
|
||||
- `pnpm run dev`: 启动开发服务器。
|
||||
- `pnpm run build`: 构建项目。
|
||||
- `pnpm run start`: 使用 Wrangler Pages 在本地运行构建的应用程序。此脚本使用 `bindings.sh` 设置必要的绑定,因此你不必重复环境变量。
|
||||
- `pnpm run preview`: 构建项目然后在本地启动,用于测试生产构建。注意,HTTP 流目前无法按预期与 `wrangler pages dev` 一起工作。
|
||||
- `pnpm test`: 使用 Vitest 运行测试套件。
|
||||
- `pnpm run typecheck`: 运行 TypeScript 类型检查。
|
||||
- `pnpm run typegen`: 使用 Wrangler 生成 TypeScript 类型。
|
||||
- `pnpm run deploy`: 构建项目并将其部署到 Cloudflare Pages。
|
||||
|
||||
## 开发
|
||||
|
||||
要启动开发服务器:
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
这将启动 Remix Vite 开发服务器。
|
||||
|
||||
## 测试
|
||||
|
||||
运行测试套件:
|
||||
|
||||
```bash
|
||||
pnpm test
|
||||
```
|
||||
|
||||
## 部署
|
||||
|
||||
要将应用程序部署到 Cloudflare Pages:
|
||||
|
||||
```bash
|
||||
pnpm run deploy
|
||||
```
|
||||
|
||||
确保你拥有必要的权限,并且 Wrangler 已正确配置为你的 Cloudflare 账户。
|
||||
Loading…
Reference in New Issue
Block a user