kit.vite.build.rollupOptions example

Can you provide a production build configuration example?

I’m not having any luck filling up rollupOptions of the following svelte.config.cjs…

const sveltePreprocess = require('svelte-preprocess');
const node = require('@sveltejs/adapter-node');
const pkg = require('./package.json');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: sveltePreprocess(),
	kit: {
		// By default, `npm run build` will create a standard Node app.
		// You can create optimized builds for different platforms by
		// specifying a different adapter
		adapter: node(),

		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',

		vite: {
			ssr: {
				noExternal: Object.keys(pkg.dependencies || {})
			},
			build: {
				rollupOptions: {
					/* ? */
				}
			}
		}

	}
};

…with what I have in the working rollup.config.js file…

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),

		babel({
			extensions: ['.js', '.mjs', '.html', '.svelte'],
			babelHelpers: 'runtime',
			exclude: ['node_modules/@babel/**'], // <= /!\ NOT 'node_mobules/**'
			presets: [
				['@babel/preset-env', {
					// adapter to ensure IE 11 support
					targets: '> 0.25%, not dead, IE 11'
				}]
			],
			plugins: [
				"@babel/plugin-syntax-dynamic-import",
				["@babel/plugin-transform-runtime", {
					useESModules: true
				}]
			]
		}),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

…because I’m not having any luck importing anything into the cjs file.

Is it still possible to provide a vite.config.js solely for the build options?

[phaleth]

I’m trying to make the client side JS go through the transpilation process in order for it to run on legacy browsers such as IE11. As far as I can see Vite can do it. Some source even says that Vite can build a bundle that works for both modern and legacy browsers, while not twisting the syntax for modern ones, but I haven’t done any research on that. I’m trying SvelteKit first.

At this moment I’m not that versed in SvelteKit to know at least that if something like this Sapper repo https://github.com/antony/sapper-ie has, is at all possible. I’m pretty much new to the whole Svelte ecosystem.

I’d like to dig into things to see if SvelteKit works for old browsers, even if that means sacrificing some of the SvelteKit features. I already know how to transpile Svelte for IE11 with both Rollup and Snowpack, but client side JS isn’t of much use for me.

At this time the cjs file, which demands to use require statements, is what throws me off. The repo linked above uses the good old rollup.config..js.

I absolutely realize that using IE11 is dumb and not recommended by MS since 2018. I hate IE11 with passion too, just like all of the devs do, but corporations, that are stuck with it, don’t think it’s necessary to replace.

I know vite.config.js was part of the SvelteKit not a long ago. Not trying to say that it should go back, just not having any idea about how to go on with Vite/Rollup specific configurations inside svelte.config.cjs.

Sacrificing for example the routing mechanism isn’t the end of the world for me. For what I need to do the URI can remain constant throughout the whole lifecycle of the web app.

[Rich-Harris]

I’m going to close this in favour of #12, since this is a bigger question that just passing config to vite (which in the general case — plugins, etc — can be done as long as you don’t touch the bits SvelteKit needs to be resonsible for). We need to be able to generate the legacy JS, but we also need to inject a <script> block that detects that we need to use it, which Vite can’t help with. (In a pure Vite project you can, because it controls your HTML, but that doesn’t apply the same way to SSR frameworks that use Vite under the hood.)