live code: svelte + rollup.config + package.json step-by-step, from scratch, by hand
Channel: SpinSpire
Date: 25/04/2020

Learn how to write rollup bundling config for Svelte app from scratch, by hand, step-by-step understanding each line you add and why you add it, without copy-pasting. In the end, we end up with a project that looks almost identical to https://github.com/sveltejs/template, but we built ours on our own. We know the reason why we added each line, and how it works, why it is needed.

For questions, post a comment. For business inquiries, email info@spinspire.com.

TOC/Index
00:00 Motivation/Goal: build the entire project by hand without a starter template
01:25 Create package.json with: npm init -y
03:00 Basic code in "src": main.js, App.svelte
04:40 Web assets in "public": index.html, loads "public/build/bundle.js"
06:00 Add svelte compiler, rollup, and rollup-plugin-svelte to the project.json
06:45 Add "build" script to package.json: invokes "rollup" bundler
07:20 Create "rollup.config.js"
08:30 Rollup config object properties: input (string), output (object), plugins (array)
09:30 First compile. Fails.
10:10 Add svelte compiler to rollup.config.js
11:00 Output still going to console. Let's store it in public/build/bundle.js
12:50 Add npm package "resolve" plugin, so that imported npm package code is bundled
15:15 Successful compile! Let's serve it with "live server" and view the result in browser.
17:00 Stop polluting global namespace by using output format "iife"
19:40 Add "start" script to package.json: "sirv public" (also copy favicon into the public folder)
23:45 Testing small changes. Recompiles manually. Let's make it automatic with rollup "watch"
27:45 Watch mode breaks, needs "--dev" option for "sirv"
30:00 Add browser auto-reloading with "livereload" plugin
33:20 Live-reload works! Let's disable "clearScreen" on each recompile
35:10 Let's add "sirv" to run in background with "dev" script
43:30 Downgrade from rollup 2.7.0 to 1.32.0
47:00 Add CSS generation (bundle.css)
56:00 Why should be add `dedupe: ["svelte"]` setting?
57:00 Why do we need "commonjs" plugin?
1:03:00 Add "--single" option to "sirv" to run in SPA mode
1:05:08 Summary and recap