Minimal efforts to make svelte work in esbuild.
npm add -D @hyrious/esbuild-plugin-svelte svelte esbuild
import { build } from 'esbuild'
import { svelte } from '@hyrious/esbuild-plugin-svelte'
await build({
entryPoints: ['main.js'],
bundle: true,
plugins: [svelte()],
}).catch(() => process.exit(1))
svelte({
filter: /\.svelte(\?.*)?$/,
compilerOptions: {},
preprocess: [],
emitCss: true,
inspector: void 0,
dynamicCompileOptions: () => void 0,
})
Passed to esbuild onLoad()
callback to match svelte files.
See svelte/compiler#CompileOptions.
If not specified, the dev
mode is detected with the following logic:
dev: false
.minify: true
define: { 'process.env.NODE_ENV': '"production"' }
define: { 'import.meta.env.NODE_ENV': '"production"' }
define: { 'import.meta.env.DEV': 'false' }
dev: true
.If not specified, the ssr
mode (generate: 'server'
) is detected with the following logic:
generate: 'server'
.define: { 'import.meta.env.SSR': 'true' }
generate: 'client'
.See svelte/compiler#Preprocessor.
You can opt-in the esbuild-powered TypeScript preprocessor by:
import { svelte, typescript } from '@hyrious/esbuild-plugin-svelte'
svelte({
// esbuild will print warnings on the final js, so suppress them here.
preprocess: [typescript({ onwarn: false })],
})
Generate virtual CSS files. If true
(by default), it will set svelte compile
options css: 'external'
automatically.
Enable svelte inspector during development (see the dev
logic above).
You can set it to false
to ensure it is not enabled anyway.
A function to update compilerOptions
before compilation.
svelte({
dynamicCompileOptions({ filename }) {
if (filename.includes('node_modules')) return { runes: false }
},
})
MIT @ hyrious