@sveltejs/vite-plugin-svelte

What is @sveltejs/vite-plugin-svelte?

@sveltejs/vite-plugin-svelte is a Vite plugin that provides seamless integration with Svelte, a modern JavaScript framework for building user interfaces. This plugin allows developers to use Svelte with Vite, leveraging Vite's fast build times and hot module replacement (HMR) capabilities.

What are @sveltejs/vite-plugin-svelte's main functionalities?

Basic Setup

This code demonstrates how to include the @sveltejs/vite-plugin-svelte plugin in a Vite configuration file. This basic setup allows you to start using Svelte with Vite.

```json
{
  "plugins": [
    require('@sveltejs/vite-plugin-svelte')()
  ]
}
```

Hot Module Replacement (HMR)

This code sample shows how to enable Hot Module Replacement (HMR) with the @sveltejs/vite-plugin-svelte plugin. HMR allows you to see changes in your Svelte components instantly without a full page reload.

```json
{
  "plugins": [
    require('@sveltejs/vite-plugin-svelte')({
      hot: true
    })
  ]
}
```

Custom Svelte Compiler Options

This example demonstrates how to pass custom compiler options to the Svelte compiler using the @sveltejs/vite-plugin-svelte plugin. In this case, the `dev` option is set to `true` to enable development mode.

```json
{
  "plugins": [
    require('@sveltejs/vite-plugin-svelte')({
      compilerOptions: {
        dev: true
      }
    })
  ]
}
```

Other packages similar to @sveltejs/vite-plugin-svelte

vite-plugin-vue2

vite-plugin-vue2 is a Vite plugin that provides support for Vue 2.x. Similar to @sveltejs/vite-plugin-svelte, it allows developers to use Vue 2 with Vite, leveraging Vite's fast build times and HMR capabilities. However, it is specifically tailored for Vue 2.x instead of Svelte.

vite-plugin-react

vite-plugin-react is a Vite plugin that provides support for React. Like @sveltejs/vite-plugin-svelte, it integrates React with Vite, offering fast build times and HMR. This plugin is designed for React developers who want to use Vite as their build tool.

vite-plugin-preact

vite-plugin-preact is a Vite plugin that provides support for Preact, a lightweight alternative to React. Similar to @sveltejs/vite-plugin-svelte, it allows developers to use Preact with Vite, benefiting from Vite's performance optimizations and HMR.

README

@sveltejs/vite-plugin-svelte

usage

// vite.config.js
const svelte = require('@sveltejs/vite-plugin-svelte');
const { defineConfig } = require('vite');

module.exports = defineConfig(({ command, mode }) => {
	const isProduction = mode === 'production';
	return {
		plugins: [
			svelte({
				/* inline options here */
			})
		],
		build: {
			minify: isProduction
		}
	};
});

Options

vite-plugin-svelte reads the vite configuration and uses an appropriate default configuration

It also loads svelte.config.js (or svelte.config.cjs) from the configured vite.root directory automatically.

Options are applied in the following order:

1. vite-plugin-svelte defaults
2. svelte.config.js in vite.root
3. inline options passed in vite.config.js

It supports all options from rollup-plugin-svelte and some additional options to tailor the plugin to your needs.

For more Information check options.ts

Integrations for other vite plugins

Add an extra preprocessor

vite-plugin-svelte uses the svelte compiler to split .svelte files into js and css and the svelte compiler requires that the css passed to it is already plain css. If you are building a plugin for vite that transforms css and want it to work out of the box with vite-plugin-svelte, you can add a sveltePreprocess: PreprocessorGroup to your vite plugin definition and vite-plugin-svelte will pick it up and add it to the list of svelte preprocessors used at runtime.

const vitePluginCoolCss = {
	name: 'vite-plugin-coolcss',
	sveltePreprocess: {
		/* your PreprocessorGroup here */
	}
	/*... your cool css plugin implementation here .. */
};

Check out windicss

License

MIT