experiments

All kinds of coding experiments
Log | Files | Refs | Submodules

rollup.config.js (2731B)

      1 import svelte from 'rollup-plugin-svelte';
      2 import commonjs from '@rollup/plugin-commonjs';
      3 import resolve from '@rollup/plugin-node-resolve';
      4 import livereload from 'rollup-plugin-livereload';
      5 import { terser } from 'rollup-plugin-terser';
      6 import css from 'rollup-plugin-css-only';
      7 import workbox from 'workbox-build';
      8 
      9 
     10 const production = !process.env.ROLLUP_WATCH;
     11 
     12 function serve() {
     13 	let server;
     14 
     15 	function toExit() {
     16 		if (server) server.kill(0);
     17 	}
     18 
     19 	return {
     20 		writeBundle() {
     21 			if (server) return;
     22 			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
     23 				stdio: ['ignore', 'inherit', 'inherit'],
     24 				shell: true
     25 			});
     26 
     27 			process.on('SIGTERM', toExit);
     28 			process.on('exit', toExit);
     29 		}
     30 	};
     31 }
     32 
     33 // Calls workbox directly - might want to use https://www.npmjs.com/package/rollup-plugin-workbox instead
     34 function generateSW() {
     35 	workbox.generateSW({
     36 		cacheId: 'example_pwa',
     37 		globDirectory: 'public/',
     38 		// Precaching
     39 		globPatterns: [
     40 			'**/*.{html,json,js,css,wasm}'
     41 		],
     42 		swDest: 'public/sw.js',
     43 		navigateFallback: '/index.html',
     44 		// Runtime caching - do not cache image until they're used
     45 		runtimeCaching: [{
     46 			// Match any request that ends with .png, .jpg, .jpeg or .svg.
     47 			urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
     48 
     49 			// Apply a cache-first strategy.
     50 			handler: 'CacheFirst',
     51 
     52 			options: {
     53 				// Use a custom cache name.
     54 				cacheName: 'images',
     55 
     56 				// Only cache 10 images.
     57 				expiration: {
     58 					maxEntries: 10,
     59 				},
     60 			},
     61 		}],
     62 	})
     63 }
     64 
     65 export default {
     66 	input: 'src/main.js',
     67 	output: {
     68 		sourcemap: true,
     69 		format: 'iife',
     70 		name: 'app',
     71 		file: 'public/build/bundle.js'
     72 	},
     73 	plugins: [
     74 		svelte({
     75 			compilerOptions: {
     76 				// enable run-time checks when not in production
     77 				dev: !production
     78 			}
     79 		}),
     80 		// we'll extract any component CSS out into
     81 		// a separate file - better for performance
     82 		css({ output: 'bundle.css' }),
     83 
     84 		// If you have external dependencies installed from
     85 		// npm, you'll most likely need these plugins. In
     86 		// some cases you'll need additional configuration -
     87 		// consult the documentation for details:
     88 		// https://github.com/rollup/plugins/tree/master/packages/commonjs
     89 		resolve({
     90 			browser: true,
     91 			dedupe: ['svelte']
     92 		}),
     93 		commonjs(),
     94 
     95 		// In dev mode, call `npm run start` once
     96 		// the bundle has been generated
     97 		!production && serve(),
     98 
     99 		// Watch the `public` directory and refresh the
    100 		// browser on changes when not in production
    101 		!production && livereload('public'),
    102 
    103 		// If we're building for production (npm run build
    104 		// instead of npm run dev), minify
    105 		production && terser(),
    106 
    107 		// Generate service worker with Workbox when in production
    108 		production && generateSW()
    109 	],
    110 	watch: {
    111 		clearScreen: false
    112 	}
    113 };