-
Notifications
You must be signed in to change notification settings - Fork 0
/
rollup.config.js
100 lines (96 loc) · 2.43 KB
/
rollup.config.js
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
import typescript from "rollup-plugin-typescript2";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import html from "@rollup/plugin-html";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import replace from "@rollup/plugin-replace";
const libraryConfig = {
input: "src/index.ts",
output: [
{
file: "dist/index.js",
format: "cjs",
sourcemap: true,
exports: 'named',
},
{
file: "dist/index.esm.js",
format: "esm",
sourcemap: true,
exports: 'named',
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({
tsconfig: "./tsconfig.json",
useTsconfigDeclarationDir: true,
clean: true,
}),
postcss(),
],
external: ['react', 'react-dom'],
};
const demoConfig = {
input: "src/main.tsx",
output: {
dir: "dist",
format: "iife",
name: "App",
sourcemap: true,
globals: {
react: "React",
"react-dom": "ReactDOM",
"react-dom/client": "ReactDOM",
},
},
external: ["react", "react-dom", "react-dom/client"],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({
tsconfig: "./tsconfig.json",
}),
postcss(),
replace({
"process.env.NODE_ENV": JSON.stringify("production"),
preventAssignment: true,
}),
html({
template: ({ files, publicPath }) => {
const scripts = (files.js || [])
.map(
({ fileName }) => `<script src="${publicPath}${fileName}"></script>`
)
.join("\n");
const styles = (files.css || [])
.map(
({ fileName }) =>
`<link href="${publicPath}${fileName}" rel="stylesheet">`
)
.join("\n");
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Overlay Image Gallery</title>
${styles}
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
${scripts}
</body>
</html>
`;
},
}),
],
};
export default [libraryConfig, demoConfig];