Skip to content

Instantly share code, notes, and snippets.

@kubido
Last active January 16, 2022 18:51
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kubido/25cbe71117909ca9dc23058fb0042592 to your computer and use it in GitHub Desktop.
Save kubido/25cbe71117909ca9dc23058fb0042592 to your computer and use it in GitHub Desktop.
Svelte rollup config for custom html template with hashed bundle filename
import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import html from "@rollup/plugin-html";
const production = !process.env.ROLLUP_WATCH;
const version = String(
require("child_process").execSync("git rev-parse --short HEAD")
).trim();
const htmlOptions = {
template: async ({ attributes, files, meta, publicPath, title }) => {
const script = (files.js || [])
.map(({ fileName }) => {
return `<script defer src='${fileName}'></script>`;
})
.join("\n");
const css = (files.css || [])
.map(({ fileName }) => {
return `<link rel='stylesheet' href='${fileName}'>`;
})
.join("\n");
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content="width=device-width,initial-scale=1,user-scalable=no">
<meta http-equiv='origin-trial' content='ArcEc1taNHMu4hv4uJ0EqaaarH4y4amJM0PAuYQbWz8jQ7PKsDlfqI60XiQEtUGC6rPyIX0a/w9bErcnW28RDgsAAABReyJvcmlnaW4iOiJodHRwczovL29icy13ZWIubmllay50djo0NDMiLCJmZWF0dXJlIjoiV2FrZUxvY2siLCJleHBpcnkiOjE1OTQxNjYzOTl9'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<title>OBS-web</title>
<link rel='icon' type='image/png' href='favicon.png'>
${css}
<link rel='manifest' href='manifest.json'>
${script}
</head>
<body>
</body>
</html>`;
},
};
export default {
input: "src/main.js",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: `public/build/bundle.${version}.js`,
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: (css) => {
css.write("public/build/bundle.css");
},
}),
// 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(),
json(),
html(htmlOptions),
// In dev mode, call `npm run 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 (npm run build
// instead of npm run dev), minify
production && terser(),
],
watch: {
clearScreen: false,
},
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
stdio: ["ignore", "inherit", "inherit"],
shell: true,
});
}
},
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment