> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# Solid

本文介绍如何基于 Rsbuild 构建 Solid 应用。

## 创建 Solid 应用

使用 [create-rsbuild](/zh/guide/start/quick-start.md#create-an-rsbuild-application) 创建基于 Rsbuild 的 Solid 应用：


```sh [npm]
npm create rsbuild@latest
```

```sh [yarn]
yarn create rsbuild
```

```sh [pnpm]
pnpm create rsbuild@latest
```

```sh [bun]
bun create rsbuild@latest
```

然后在 `Select framework` 时选择 `Solid` 即可。

## 全栈框架 \{#full-stack-frameworks}

以下全栈 Solid 框架基于 Rsbuild 构建，并复用 Rsbuild 的插件生态。

### TanStack Start

[TanStack Start](https://tanstack.com/start/latest) 是一个由 TanStack Router 驱动的全栈框架。它提供整页文档 SSR、流式渲染、Server Functions、客户端/服务端构建等能力。

- [文档](https://tanstack.com/start/latest)
- [示例项目](https://github.com/rstackjs/rstack-examples/tree/main/rsbuild/tanstack-start-solid)

你可以运行以下命令来一键初始化 TanStack Start 示例项目：

```bash
npx giget gh:rstackjs/rstack-examples/rsbuild/tanstack-start-solid tanstack-start
cd tanstack-start
pnpm i
```

如果需要将 TanStack Start 项目从 Vite 迁移到 Rsbuild，请参考 [TanStack Start 迁移](/zh/guide/migration/tanstack-start.md)。

## 在已有项目中使用 Solid

要编译 Solid 组件，需注册 Rsbuild 的 [Solid 插件](/zh/plugins/list/plugin-solid.md)，插件会自动添加 Solid 构建所需的配置。

例如，在 Rsbuild 配置中注册：

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginSolid } from '@rsbuild/plugin-solid';

export default defineConfig({
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginSolid(),
  ],
});
```