# @cubejs-client/playground 中文文档

规范地址：https://npmcn.com/package/%40cubejs-client/playground/

版本：1\.8\.21
npm 元数据更新时间：2026-11-09T17:56:09.967Z
中文译文更新时间：2026-11-11T04:13:02.830Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cubejs-client/playground
原文对照：https://npmcn.com/package/%40cubejs-client/playground/?lang=original
项目主页：http://./
源码仓库：https://github.com/cube-js/cube

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：39.2 MB，1155 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：32 个
- peer 依赖：antd \>=4\.16\.13，react \>=18\.0\.0，graphql \>=15\.8\.0，prismjs \>=1\.25\.0，react-dom \>=18\.0\.0，@cube-dev/ui-kit \>=0\.52\.3，@ant-design/icons \>=4\.7\.0，styled-components \>=6\.5\.3，@cubejs-client/core \>=0\.30\.0，@cubejs-client/react \>=0\.30\.0
- 首次发布：2019-03-06T22:10:21.712Z
- 最新版本发布：2026-11-09T17:56:09.576Z
- 近 30 天下载量：8811（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：710（近 12 个月 173 个）

## 中文简介

[![Cube](https://i.imgur.com/zYHXm4o.png)](https://cube.dev/)

## 安装

```sh
npm install @cubejs-client/playground
```

也可以使用：`pnpm add @cubejs-client/playground`、`yarn add @cubejs-client/playground`、`bun add @cubejs-client/playground`

## README

[![Cube](https://i.imgur.com/zYHXm4o.png)](https://cube.dev/)

[网站](https://cube.dev/) 二. 支助 [文档](https://docs.cube.dev/) 二. 支助 [博客](https://cube.dev/blog) 二. 支助 [偷懒](https://slack.cube.dev/) 二. 支助 [微博](https://twitter.com/the_cube_dev)

[![npm version](https://badge.fury.io/js/%40cubejs-backend%2Fserver.svg)](https://badge.fury.io/js/%40cubejs-backend%2Fserver) [![GitHub Actions](https://github.com/cube-js/cube.js/workflows/Build/badge.svg)](https://github.com/cube-js/cube.js/actions?query=workflow%3ABuild+branch%3Amaster)

# 立方体游戏场

用于 Cube 开发服务器环境的 UI.

[学多点](https://github.com/cube-js/cube.js#getting-started)

### 反应组件

`@cubejs-client/playground` 提供您可以在应用程序中嵌入的独立组件.

```jsx
import { QueryBuilder } from '@cubejs-client/playground';
// import the antd styles from the `@cubejs-client/playground` package as it overrides some variables
import '@cubejs-client/playground/lib/antd.min.css';
// alternatively you can use the default antd styles
// import 'antd/dist/antd.min.css';

const apiUrl = 'http://localhost:4000/cubejs-api/v1';
const token = 'your.token';

export default function App() {
  const query = {
    measures: ['Orders.count'],
    dimensions:  ['Orders.status']
  };

  return (
    <QueryBuilder
      apiUrl={apiUrl}
      token={token}
      initialVizState={{
        query
      }}
    />
  );
}
```

另外,您还需要将 Playground 图表渲染器移动到一个公共文件夹中 。 假设公开的文件夹是 `public`,您可以从应用程序的根执行以下脚本

```bash
#!/bin/bash

rm -rf ./public/chart-renderers 2> /dev/null
cp -R ./node_modules/@cubejs-client/playground/public/chart-renderers ./public
```

### 许可证

立方客户端核心为 [麻省理工学院执照](https://npmcn.com/package/%40cubejs-client/playground/LICENSE)。 。 。 .

## 常见问题

### 如何安装 @cubejs-client/playground？

在项目目录运行 npm install @cubejs-client/playground，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：antd（\>=4\.16\.13）、react（\>=18\.0\.0）、graphql（\>=15\.8\.0）、prismjs（\>=1\.25\.0）、react-dom（\>=18\.0\.0）、@cube-dev/ui-kit（\>=0\.52\.3）、@ant-design/icons（\>=4\.7\.0）、styled-components（\>=6\.5\.3）、@cubejs-client/core（\>=0\.30\.0）、@cubejs-client/react（\>=0\.30\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cubejs-client/playground 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cubejs-client/playground 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cubejs-client/playground 可以商用吗？

@cubejs-client/playground 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cubejs-client/playground 的下载量有多少？

根据 npm 官方下载统计，@cubejs-client/playground 在 2026/10/11 – 2026/11/09 这 30 天内被下载 8,811 次，日均约 294 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cubejs-client/playground 还在维护吗？

最新版本 1\.8\.21 发布于 2026/11/10（1 天前）；至今共发布 710 个版本，其中过去 12 个月发布了 173 个；首次发布于 2019/03/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。