How to add multiple inputs and outputs for Svelte rollup config

I’m currently working on adding new features built in Svelte for Alfa Toro. As I finished the Compound Progress Tracker feature, I wanted to add another feature using the rollup config file. So my question is, how do I make multiple inputs & outputs for rollup?

The answer is actually really simple, return an array of configs instead of a single config object in your rollup.config.js file.

Let’s dive in, how I added multiple entries & outputs on my Svelte rollup config file with just 2 simple steps!

Step 1. Extract Rollup Config Object into a function

When you first setup a Svelte project with:

npm create vite@latest myapp -- --template svelte

You’re given an rollup configuration such as the one on the bottom, right out of the gate.

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	// ... Other configs
};

This is great for a single input & output Svelte project, but for my Alfa Toro Svelte features, I want to use the same components but keep the features separate & independent – because it’s not a JS app.

So what I did is extract this config object and wrapped around a function, as such:

function buildConfig(inputFileName, outputFileName) {
	return {
		input: `src/${inputFileName}`,
		output: {
			sourcemap: true,
			format: 'iife',
			name: 'app',
			file: `public/build/${outputFileName}.js`
		},
		// ... Other configs
	}
}

The function allows for two arguments variables called inputFileName & outputFileName. You can see where I’m going with that.

Step 2. Export array of config objects

The final step is simple. Replace the export default statement from an object to an array of buildConfig().

export default [
	buildConfig('features/compound-progress-tracker.js', 'bundle'),
	buildConfig('features/hidden-feature.js', 'hidden-feature'),
]

Now when you run npm run build from your Terminal, you should see multiple Svelte output files!

Bonus step: Create separate CSS files with Rollup

The other thing I wanted to solve for is having separate CSS files for my features, and I’m using rollup-plugin-css-only.

So in my plugin configuration I modified the output filename of my CSS code.

function buildConfig(inputFileName, outputFileName) {
	return {
		input: `src/${inputFileName}`,
		output: {
			sourcemap: true,
			format: 'iife',
			name: 'app',
			file: `public/build/${outputFileName}.js`
		},
                plugins: [
			// ... Other plugin configs

			css({ output: `${outputFileName}.css` }),

		],
	}
}

That’s it!

I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!