Svelte 插件
Svelte 插件提供了对 Svelte 组件（.svelte 文件）的支持，插件内部集成了 svelte-loader。
快速开始
安装插件
你可以通过如下的命令安装插件:
npm add @rsbuild/plugin-svelte -D
注册插件
你可以在 rsbuild.config.ts 文件中注册插件：
rsbuild.config.ts
import { pluginSvelte } from '@rsbuild/plugin-svelte'; export default { plugins: [pluginSvelte()], };
注册插件后，你可以在代码中引入 *.svelte 单文件组件。
选项
如果你需要自定义 Svelte 的编译行为，可以使用以下配置项。
svelteLoaderOptions
传递给 svelte-loader 的选项，请查阅 svelte-loader 文档 来了解具体用法。
- 类型：
SvelteLoaderOptions - 默认值：
const defaultOptions = { compilerOptions: { dev: isDev, }, preprocess: require('svelte-preprocess')(), emitCss: isProd && !rsbuildConfig.output.injectStyles, hotReload: isDev && rsbuildConfig.dev.hmr, };
pluginSvelte({ svelteLoaderOptions: { preprocess: null, }, });
preprocessOptions
传递给 svelte-preprocess 的选项，请查阅 svelte-preprocess 文档 来了解具体用法。
- 类型：
AutoPreprocessOptions - 默认值：
undefined
interface AutoPreprocessOptions { globalStyle: { ... }, replace: { ... }, typescript: { ... }, scss: { ... }, sass: { ... }, less: { ... }, stylus: { ... }, babel: { ... }, postcss: { ... }, coffeescript: { ... }, pug: { ... }, }
pluginSvelte({ preprocessOptions: { aliases: [ ['potato', 'potatoLanguage'], ['pot', 'potatoLanguage'], ], /** Add a custom language preprocessor */ potatoLanguage({ content, filename, attributes }) { const { code, map } = require('potato-language').render(content); return { code, map }; }, }, });
注意事项
目前 svelte-loader 暂不支持 Svelte v5 热更新，详见 svelte-loader - Hot Reload。
