import resolve from "@rollup/plugin-node-resolve"; import typescript from "@rollup/plugin-typescript"; import autoprefixer from "autoprefixer"; import child_process from "child_process"; import postcss from "postcss"; import livereload from "rollup-plugin-livereload"; import scss from "rollup-plugin-scss"; import svelte from "rollup-plugin-svelte"; import { terser } from "rollup-plugin-terser"; import sveltePreprocess from "svelte-preprocess"; const production = !process.env.ROLLUP_WATCH; function serve() { let server; function toExit() { if (server) server.kill(0); } return { writeBundle() { if (server) return; server = child_process.spawn("yarn", ["start", "--dev"], { stdio: ["ignore", "inherit", "inherit"], shell: true, }); process.on("SIGTERM", toExit); process.on("exit", toExit); }, }; } export default { input: "src/main.ts", output: { sourcemap: true, format: "module", name: "sharg", file: "public/build/bundle.js", externalLiveBindings: false, preferConst: true, strict: true, compact: production, }, plugins: [ // Svelte adds "stdin" to the sourceMap svelte({ preprocess: [ sveltePreprocess({ scss: { renderSync: true, }, }), ], compilerOptions: { // enable run-time checks when not in production dev: !production, }, }), // The processor (postcss) adds "bundle.css" to the sourceMap // but for some reason only in dev mode? scss({ outputStyle: production ? "compressed" : "expanded", processor() { // If this is a separate plugin, it doesn't seem to run (autoprefixer doesn't run) return postcss({ plugins: [autoprefixer()], }); }, }), resolve({ browser: true, dedupe: ["svelte"], }), typescript({ sourceMap: true, inlineSources: true, exclude: ["node_modules/*", "public/*", "**/service-worker.ts"], }), // In dev mode, call `yarn 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 (yarn build // instead of yarn dev), minify js production && terser({ mangle: false, output: { comments: false }, }), ], watch: { clearScreen: false, }, };