# @apollo/sandbox 中文文档
规范地址：https://npmcn.com/package/%40apollo/sandbox/
版本：2\.7\.4
npm 元数据更新时间：2026-01-22T17:35:02.608Z
中文译文更新时间：2026-11-06T11:00:44.985Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40apollo/sandbox
原文对照：https://npmcn.com/package/%40apollo/sandbox/?lang=original
项目主页：https://github.com/apollographql/embeddable-explorer/sandbox#readme
源码仓库：https://github.com/apollographql/embeddable-explorer/sandbox
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：175 kB，29 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2022-06-30T23:08:42.566Z
- 最新版本发布：2026-01-08T21:00:09.518Z
- 近 30 天下载量：148963（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 1 个）
## 中文简介
这个 repo 主机为 Aporo Studio 的可嵌入沙盒的源文件
## 安装
```sh
npm install @apollo/sandbox
```
也可以使用：`pnpm add @apollo/sandbox`、`yarn add @apollo/sandbox`、`bun add @apollo/sandbox`
## README
# 阿波罗工作室可嵌入沙盒
这个 repo 主机为 Aporo Studio 的可嵌入沙盒的源文件
[使用详情见文件](https://www.apollographql.com/docs/studio/explorer/sandbox/#embedding-sandbox)
## 使用 [@ apollo/ sandbox npm 软件包](https://www.npmjs.com/package/@apollo/sandbox)
您可以下载 @ apollo/ sandbox npm 软件包 `npm install @apollo/sandbox`。然后,您可以导入 AporoSandbox 类或 AporoSandbox 反应组件 :
```
import { ApolloSandbox } from '@apollo/sandbox';
import { ApolloSandbox } from '@apollo/sandbox/react';
```
当你用一个 `target` 在你的应用软件中,Sandbox会出现在这个元素的iframe中。 检查所有的 [配置选项](https://www.apollographql.com/docs/studio/explorer/sandbox/#options) 你的图表.
### 反应
```
import { ApolloSandbox } from '@apollo/sandbox/react';
function App() {
return (
);
}
```
### 香草联署材料
```
import { ApolloSandbox } from '@apollo/sandbox';
function App() {
...
new ApolloSandbox({
target: '#embeddableSandbox',
})
...
}
...
// style the iframe for your site
```
### 原始 cdn 主机 umd 文件的实例
- [嵌入已注册的公共图](https://npmcn.com/package/%40apollo/sandbox/src/examples/graphRef.html)
- [直接通过计划使用](https://npmcn.com/package/%40apollo/sandbox/src/examples/manualSchema.html)
## 开发嵌入式沙盒
运行 `npm run build:umd` 以构建嵌入式Sandbox在窗口上曝光的 umd 文件.
打开 `examples/localDevelopmentExample.html` 测试您的变化。 (如果来源未设定, 请运行本地DevelopmentExample.html from `Live Server`(中文(简体) )
安装 `Live Server` 扩展到 `localDevelopmentExample.html` 点击“Go Live” 
### 以反应为例开发嵌入式沙盒
运行 `npm run build:cjs-esm` 用于构建 cjs & esm 文件,其中阿波罗Sandbox & 阿波罗Sandbox React 被命名为导出.
我们有一个反应实例应用程序,它使用我们的阿波罗Sandbox反应组件,使嵌入式沙盒位于src/examples/resact-example. 举个例子, `npm run build` 财务报告和审定财务报表 `npm run start` 内 `react-example`。在重建新的更改前,请确保删除 .parcel-cache 文件夹。 (TODO去掉包裹缓存)
## 常见问题
### @apollo/sandbox 是什么？
这个 repo 主机为 Aporo Studio 的可嵌入沙盒的源文件
### 如何安装 @apollo/sandbox？
在项目目录运行 npm install @apollo/sandbox，或使用 pnpm add / yarn add / bun add。
### @apollo/sandbox 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @apollo/sandbox 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @apollo/sandbox 可以商用吗？
@apollo/sandbox 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @apollo/sandbox 的下载量有多少？
根据 npm 官方下载统计，@apollo/sandbox 在 2026/10/07 – 2026/11/05 这 30 天内被下载 148,963 次，日均约 4,965 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @apollo/sandbox 还在维护吗？
最新版本 2\.7\.4 发布于 2026/01/09（9 个月前）；至今共发布 24 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/07/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。