rollup.config.js

import svelte from "rollup-plugin-svelte-hot";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import postcss from "rollup-plugin-postcss";
import sveltePreprocess from "svelte-preprocess";
import { terser } from "rollup-plugin-terser";

// Set this to true to pass the --single flag to sirv (this serves your
// index.html for any unmatched route, which is a requirement for SPA
// routers using History API / pushState)
//
// NOTE This will have no effect when running with Nollup. For Nollup, you'd
// have to add the --history-api-fallback yourself in your package.json
// scripts (see: https://github.com/PepsRyuu/nollup/#nollup-options)
//
const spa = false;

// NOTE The NOLLUP env variable is picked by various HMR plugins to switch
// in compat mode. You should not change its name (and set the env variable
// yourself if you launch nollup with custom comands).
const isNollup = !!process.env.NOLLUP;
const isWatch = !!process.env.ROLLUP_WATCH;
const isLiveReload = !!process.env.LIVERELOAD;

const isDev = isWatch || isLiveReload;
const isProduction = !isDev;

const isHot = isWatch && !isLiveReload;

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/index.js",
  context: "window",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
    inlineDynamicImports: true,
  },
  plugins: [
    // Use PostCSS configuration and extract Svelte components style
    postcss({
      extensions: [".css"],
      extract: false,
      minimize: true,
      use: [
        [
          "sass",
          {
            includePaths: ["./node_modules"],
          },
        ],
      ],
    }),

    svelte({
      // enable run-time checks when not in production
      dev: !isProduction,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      // NOTE when hot option is enabled, a blank file will be written to
      // avoid CSS rules conflicting with HMR injected ones
      css: (css) => {
        css.write(isNollup ? "build/bundle.css" : "bundle.css");
      },
      hot: isHot && {
        // Optimistic will try to recover from runtime
        // errors during component init
        optimistic: true,
        // Turn on to disable preservation of local component
        // state -- i.e. non exported `let` variables
        noPreserveState: false,

        // See docs of rollup-plugin-svelte-hot for all available options:
        //
        // https://github.com/rixo/rollup-plugin-svelte-hot#usage
      },
      // Preprocess PostCSS
      preprocess: sveltePreprocess({ postcss: true }),
      // enable run-time checks when not in production
      // we'll extract any component CSS out into
      // a separate file - better for performance
    }),

    // Convert JSON files into ES6 modules
    // needed for i18n translation files
    json(),

    // 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(),

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

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