124 lines
3.2 KiB
JavaScript
124 lines
3.2 KiB
JavaScript
|
import svelte from "rollup-plugin-svelte";
|
||
|
|
import esbuild from "rollup-plugin-esbuild";
|
||
|
|
import html from "@rollup/plugin-html";
|
||
|
|
import resolve from "@rollup/plugin-node-resolve";
|
||
|
|
import image from "@rollup/plugin-image";
|
||
|
|
import sizes from "rollup-plugin-sizes";
|
||
|
|
import { visualizer } from "rollup-plugin-visualizer";
|
||
|
|
import postcss from "rollup-plugin-postcss";
|
||
|
|
import livereload from "rollup-plugin-livereload";
|
||
|
|
import sveltePreprocess from "svelte-preprocess";
|
||
|
|
|
||
|
|
const VIEWS = ["home", "login", "popup", "user"];
|
||
|
|
|
||
|
|
const dev = process.env.NODE_ENV !== "production";
|
||
|
|
|
||
|
|
const htmlTemplate = ({ attributes, meta, files, publicPath, title }) => {
|
||
|
|
const makeHtmlAttributes = (attributes) => {
|
||
|
|
if (!attributes) {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
|
||
|
|
const keys = Object.keys(attributes);
|
||
|
|
// eslint-disable-next-line no-param-reassign
|
||
|
|
return keys.reduce(
|
||
|
|
(result, key) => (result += ` ${key}="${attributes[key]}"`),
|
||
|
|
""
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const scripts = (files.js || [])
|
||
|
|
.map(({ fileName }) => {
|
||
|
|
const attrs = makeHtmlAttributes(attributes.script);
|
||
|
|
return `<script src="${publicPath}${fileName}"${attrs}></script>`;
|
||
|
|
})
|
||
|
|
.join("\n");
|
||
|
|
|
||
|
|
const links = (files.css || [])
|
||
|
|
.map(({ fileName }) => {
|
||
|
|
const attrs = makeHtmlAttributes(attributes.link);
|
||
|
|
return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
|
||
|
|
})
|
||
|
|
.join("\n");
|
||
|
|
|
||
|
|
const metas = meta
|
||
|
|
.map((input) => {
|
||
|
|
const attrs = makeHtmlAttributes(input);
|
||
|
|
return `<meta${attrs}>`;
|
||
|
|
})
|
||
|
|
.join("\n");
|
||
|
|
|
||
|
|
return `
|
||
|
|
<!doctype html>
|
||
|
|
<html${makeHtmlAttributes(attributes.html)}>
|
||
|
|
<head>
|
||
|
|
${metas}
|
||
|
|
<title>${title}</title>
|
||
|
|
<link rel="stylesheet" href="bundle.css"/>
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
|
||
|
|
${links}
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
${scripts}
|
||
|
|
</body>
|
||
|
|
</html>`;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default VIEWS.map((view) => ({
|
||
|
|
input: `src/pages/${view}/main.ts`,
|
||
|
|
output: [
|
||
|
|
dev
|
||
|
|
? {
|
||
|
|
file: `build/${view}/bundle.js`,
|
||
|
|
format: "iife",
|
||
|
|
sourcemap: true,
|
||
|
|
name: view,
|
||
|
|
}
|
||
|
|
: {
|
||
|
|
file: `build/${view}/bundle.min.js`,
|
||
|
|
format: "iife",
|
||
|
|
name: view,
|
||
|
|
plugins: [
|
||
|
|
esbuild({
|
||
|
|
minify: true,
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
plugins: [
|
||
|
|
svelte({
|
||
|
|
emitCss: true,
|
||
|
|
preprocess: sveltePreprocess({}),
|
||
|
|
}),
|
||
|
|
esbuild({ sourceMap: dev }),
|
||
|
|
html({
|
||
|
|
title: view,
|
||
|
|
attributes: {
|
||
|
|
html: { lang: "en" },
|
||
|
|
},
|
||
|
|
meta: [
|
||
|
|
{
|
||
|
|
name: "viewport",
|
||
|
|
content: "width=device-width",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
template: htmlTemplate,
|
||
|
|
}),
|
||
|
|
resolve({
|
||
|
|
browser: true,
|
||
|
|
dedupe: ["svelte"],
|
||
|
|
exportConditions: ["svelte"],
|
||
|
|
}),
|
||
|
|
image(),
|
||
|
|
sizes(),
|
||
|
|
visualizer({
|
||
|
|
filename: `build/stats/${view}.html`,
|
||
|
|
title: `Rullup bundle for ${view}`,
|
||
|
|
}),
|
||
|
|
postcss({
|
||
|
|
extract: `bundle.css`, //TODO: Check if it should be enabled
|
||
|
|
// inject: true,
|
||
|
|
}),
|
||
|
|
// dev && livereload(),
|
||
|
|
],
|
||
|
|
}));
|