I've tried so many of these format exports and keep running into different issues. Running the app in Chrome, so modern browsers
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import json from '@rollup/plugin-json';
// import typescript from '@rollup/plugin-typescript';
import autoPreprocess from 'svelte-preprocess';
import { scss } from 'svelte-preprocess';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: [
{
sourcemap: true, // this would be dev/pre-prod only, not for prod
// export type InternalModuleFormat = 'amd' | 'cjs' | 'es' | 'iife' | 'system' | 'umd';
format: 'es', // cjs is commonjs, which is legacy bundle types
name: 'app',
dir: 'public/build',
},
// SystemJS version, for older browsers
{
dir: "public/build/nomodule",
format: "system",
sourcemap: true
},
],
experimentalCodeSplitting: true,
experimentalDynamicSupport: true,
// list of all the plugins
// https://github.com/rollup/plugins
plugins: [
svelte({
// this will create a custom web component for embedding, future usage
// customElement: true,
// enable run-time checks when not in production
dev: !production,
// this autoPreprocess runs all kinds things such as ts and scss support
preprocess: autoPreprocess(),
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte'],
}),
// this allows support for older module types which would be quite common in the node_modules dependencies, versus esm modules
commonjs(),
// this allows import of json files, such a configuration or data into files
json(),
// this allows ts support, although i'm not sure we need this since i think autoPreprocess does this
// typescript(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
// terser is a fork of uglify and does all the minification
production && terser(),
],
watch: {
clearScreen: false,
// don't spend the cycles to watch/monitor node_modules. when you install node modules, it won't trigger the watch. You must stop/start again
exclude: ['node_modules/**'],
},
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true,
});
}
},
};
}