Esbuild Loader Svelte

webcodingnpc

esbuild plugins for Svelte 5, SCSS compilation, and SSR stubbing

Download

esbuild-loader-svelte

esbuild 插件集合，用于编译 Svelte 5 组件、SCSS 样式，以及 SSR 空桩替换。

特性

sveltePlugin — 编译 .svelte 文件，支持 TypeScript 和 SCSS 预处理
scssPlugin — 编译 .scss 文件为 CSS
ssrStubPlugin — SSR 构建时将浏览器专属模块替换为空桩
兼容 CommonJS 和 ES Modules
支持 Svelte 5 Runes 模式

安装

npm install esbuild-loader-svelte esbuild svelte --save-dev
# SCSS 支持（可选）
npm install sass --save-dev

使用

全量引入

import { sveltePlugin, scssPlugin, ssrStubPlugin } from 'esbuild-loader-svelte'
import esbuild from 'esbuild'

await esbuild.build({
    entryPoints: ['src/main.ts'],
    bundle: true,
    outdir: 'dist',
    plugins: [sveltePlugin(), scssPlugin()],
})

按需引入

import { sveltePlugin } from 'esbuild-loader-svelte/svelte'
import { scssPlugin } from 'esbuild-loader-svelte/scss'

CommonJS

const { sveltePlugin, scssPlugin } = require('esbuild-loader-svelte')

API

`sveltePlugin(options?)`

编译 .svelte 文件为 JavaScript。

参数	类型	默认值	说明
`generate`	`'client' \| 'server'`	`'client'`	编译模式
`sassModule`	`object`	自动导入	手动传入 sass 模块
`filterWarnings`	`(code: string) => boolean`	过滤 a11y 警告	返回 `true` 则静默该警告

`scssPlugin(options?)`

编译 .scss 文件为 CSS。

参数	类型	默认值	说明
`sassModule`	`object`	自动导入	手动传入 sass 模块

`ssrStubPlugin(stubPaths)`

SSR 构建时将指定路径的模块替换为空桩。

参数	类型	说明
`stubPaths`	`string[]`	匹配的路径片段，命中则替换为空桩

// 示例：SSR 构建时跳过路由和某些组件
ssrStubPlugin(['src/router', 'views/HeavyComponent'])

CDN

<!-- 暂不支持 CDN，此包为 Node.js 构建工具 -->

License

MIT

Top categories