#Solid

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

#创建 Solid 应用

使用 create-rsbuild 创建基于 Rsbuild 的 Solid 应用：

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

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

#全栈框架

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

#TanStack Start

TanStack Start 是一个由 TanStack Router 驱动的全栈框架。它提供整页文档 SSR、流式渲染、Server Functions、客户端/服务端构建等能力。

• 文档
• 示例项目

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

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

#在已有项目中使用 Solid

要编译 Solid 组件，需注册 Rsbuild 的 Solid 插件，插件会自动添加 Solid 构建所需的配置。

例如，在 Rsbuild 配置中注册：

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(),
  ],
});