svelte-typescript-setups

Examples of different bundler setups for Svelte only, not Sapper.

Motivation

I am on the quest to find the best bundler for Svelte. Why? Because development time is expensive. When writing code I want a tight feedback loop, easy setup and configuration, flexibility and small and efficient bundle size.

My Requirements

• It must be fast
• It must support Typescript
• It must support PostCSS
• It must produce small and efficient bundles
• It must produce correct sourcemaps for debugging
• It should support HMR (Hot Module Replacement)

Test App

For the purpose of testing I created a simple Svelte app. Its functionality is simple. You press a button and it fetches a random Kanye West tweet from Kanye as a Service.

The app might be simple, maybe even naïve, but it has a few interesting parts.

• Svelte components in Typescript. I want to see if transpiling and type checking works correctly for TS.
• External Svelte library. Not all bundlers support libraries written in Svelte efficiently.
• External library dependency. I want to see if Vite supports tree shaking when bundling for production.
• Extenal Assets. It should be possible to import SVG, PNG, JSON and other external assets in our code.
• PostCSS with TailwindCSS. A good bundler should make it easy to work with SASS and PostCSS.
• Business components in Typescript. Typescript is here to stay. A good bundler should support it out-of-the-box.

Bundlers

• Vite - Is Vite currently the best bundler for Svelte?
• Svite -Svelte, PostCSS and Typescript with Svite bundler
• Snowpack - Snowpack for Svelte development revisited
• Webpack 5 - Why Webpack 5 is the best bundler for Svelte

There is more!

For more interesting stuff like this follow me on Twitter or check out my blog at codechips.me.