#Svelte

在本文档中，你将学习如何使用 Rslib 构建 Svelte 组件库。

#创建 Svelte 项目

你可以使用 create-rslib 创建 Rslib + Svelte 项目。只需执行以下命令：

npm create rslib@latest

yarn create rslib

pnpm create rslib@latest

bun create rslib@latest

然后，当提示 "Select template" 时选择 Svelte。

#在现有 Rslib 项目中使用

开发 Svelte 组件，需要在 rslib.config.ts 中设置 target 为 "web"。这一点至关重要，因为 Rslib 默认将 target 设置为 "node"，这与 Rsbuild 的 target 默认值不同。

要编译 Svelte（.svelte 组件），你需要注册 @rsbuild/plugin-svelte 插件。该插件内部集成了 svelte-loader，将自动添加 Svelte 构建所需的配置。

推荐使用 bundle 模式，让 Rslib 输出编译后的 ESM 和抽取后的 CSS：

import { pluginSvelte } from '@rsbuild/plugin-svelte';
import { defineConfig } from '@rslib/core';
import { svelteDtsPlugin } from './scripts/rslib-plugin-svelte-dts';

export default defineConfig({
  lib: [
    {
      format: 'esm',
      dts: false,
    },
  ],
  output: {
    target: 'web',
  },
  resolve: {
    conditionNames: ['svelte', 'browser', '...'],
  },
  plugins: [
    pluginSvelte(),
    svelteDtsPlugin(),
  ],
});

更多配置可以参考 Rsbuild plugins 配置 与 @rsbuild/plugin-svelte 插件文档。

生成的包会导出编译后的入口，并显式导出 CSS：

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    },
    "./style.css": "./dist/index.css"
  },
  "types": "./dist/index.d.ts"
}

#类型声明

Svelte 项目的类型声明通过 svelte2tsx 生成。因此，你需要通过 dts: false 关闭 Rslib 内置类型声明流程，并在构建完成后运行一个本地 Rslib 插件：

svelteDtsPlugin();

如果你需要自定义输出目录、组件源码目录或 tsconfig 路径，可以通过 declarationDir、libRoot、tsconfig 等选项进行配置。

如果你需要进一步自定义声明生成行为，可以参考 svelte2tsx 的 emitDts 配置项。

这个辅助插件会调用 svelte2tsx.emitDts，并输出类似 bundleless 结构的类型声明文件，例如：

dist/index.d.ts
dist/Button.svelte.d.ts

Svelte 的类型声明文件由 svelte2tsx 生成，所以 lib.dts / lib.redirect.dts / lib.banner.dts / lib.footer.dts 在 Svelte 项目中不生效。