-
Notifications
You must be signed in to change notification settings - Fork 7
/
rollup.config.mjs
113 lines (106 loc) · 2.96 KB
/
rollup.config.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import dsv from '@rollup/plugin-dsv';
import htmlBundle, { makeHtmlAttributes } from '@rollup/plugin-html';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';
import typescript from '@rollup/plugin-typescript';
import cssnano from 'cssnano';
import { readFile } from 'node:fs/promises';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss';
import svelte from 'rollup-plugin-svelte';
import svg from 'rollup-plugin-svg';
import sveltePreprocess from 'svelte-preprocess';
const fileUrl = new URL('./package.json', import.meta.url);
const pkg = JSON.parse(await readFile(fileUrl, 'utf8'));
const production = !process.env.ROLLUP_WATCH;
export default [
{
input: 'src/app.js',
output: {
format: 'iife',
name: 'ui',
file: 'build/bundle.js'
},
plugins: [
svelte({
preprocess: sveltePreprocess({
sourceMap: !production,
postcss: true
}),
compilerOptions: {
dev: !production
}
}),
resolve({
browser: true,
dedupe: (importee) => importee === 'svelte' || importee.startsWith('svelte/'),
extensions: ['.svelte', '.mjs', '.js', '.json', '.node']
}),
typescript(),
commonjs(),
babel({ babelHelpers: 'bundled' }),
svg(),
dsv(),
json(),
postcss({
extensions: ['.css'],
plugins: [cssnano()]
}),
htmlBundle({
fileName: 'index.html',
target: 'build/index.html',
title: pkg.name,
attributes: {
html: { lang: 'en' },
link: null,
script: null
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: `${pkg.description} - v${pkg.version}` }
],
template: ({ attributes, files, publicPath, title, meta }) => {
// inline all script to fit figma's one-file rule
const scripts = (files.js || []).map(({ code }) => `<script>${code}</script>`).join('\n');
const links = (files.css || [])
.map(
({ fileName }) =>
`<link href="${publicPath}${fileName}" rel="stylesheet"${makeHtmlAttributes(
attributes.link
)}>`
)
.join('\n');
const metas = meta.map((input) => `<meta${makeHtmlAttributes(input)}>`).join('\n');
const html = makeHtmlAttributes(attributes.html);
return `<!DOCTYPE html><html${html}><head><title>${title}</title>${metas}${links}</head><body><div id='app'></div>${scripts}</body></html>`;
}
}),
!production && livereload('build'),
production && terser()
],
watch: {
clearScreen: false
}
},
{
input: 'src/main.ts',
output: {
file: 'build/main.js',
format: 'cjs',
name: 'main',
inlineDynamicImports: false
},
plugins: [
typescript(),
resolve(),
commonjs(),
json(),
babel({ babelHelpers: 'bundled' }),
production && terser()
]
}
];