Skip to content

Instantly share code, notes, and snippets.

@motine

motine/Hello.vue

Last active March 28, 2020 11:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save motine/544af1e7da5d1bbede74e93d1d265ede to your computer and use it in GitHub Desktop.
Save motine/544af1e7da5d1bbede74e93d1d265ede to your computer and use it in GitHub Desktop.
Download ZIP
Rollup multi page bundles
Raw
base.css
body { font-family: mono; }
Raw
Hello.vue
<template>
<div class="hello">Hello {{ name }}.</div>
</template>
<script>
export default {
data() { return { name: 'Manfred' } }
}
</script>
<style scoped>
.hello { color: tomato; }
</style>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<link rel="stylesheet" type="text/css" href="dist/main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="dist/page1.js"></script>
</body>
</html>
Raw
page1.js
// import Vue from "vue/dist/vue.esm.browser.js";
import Hello from "./components/Hello.vue";
import './base.css';
new Vue({
el: "#app",
template: "<hello/>",
components: { Hello }
});
Raw
page2.js
// import Vue from "vue/dist/vue.esm.browser.js";
import './base.css';
new Vue({
el: "#app",
template: "<div>other</div>"
});
Raw
rollup.config.js
import vue from "rollup-plugin-vue";
// import resolve from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";
import css from 'rollup-plugin-css-only'
import babel from 'rollup-plugin-babel';
const isProduction = process.env.NODE_ENV === 'production';
const defaultPlugins = [
vue({ compileTemplate: true, css: false }),
css({ output: 'dist/main.css' }),
babel({ exclude: 'node_modules/**' }),
isProduction && terser() // minify
];
export default [
{
input: "src/page1.js",
output: { file: "dist/page1.js", format: 'iife' },
plugins: defaultPlugins
},
{
input: "src/page2.js",
output: { file: "dist/page2.js", format: 'iife' },
plugins: defaultPlugins
},
];
// this will generate:
// dist/base-abc234.js
// dist/main.css
// dist/page1.js (this includes an import to base-abc234.js)
// dist/page2.js (this includes an import to base-abc234.js)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment