rollup svelte legacy template

This is a project template for Svelte apps. Using rollup and babel to produce a IE compatible build while supporting code splitting

manual install

If you want to use this template on an existing svelte + rollup project follow these steps :

install babel

npm install --save-dev rollup-plugin-babel  

install babel core

npm install --save-dev @babel/core  

for dynamic import support

npm install --save-dev @babel/plugin-syntax-dynamic-import

not sure what it does

npm install --save-dev @babel/plugin-transform-runtime

legacy browser target

npm install --save-dev @babel/preset-env

contains polyfills

npm install --save core-js@3

add in rollup.config.js

import babel from 'rollup-plugin-babel'

export default {
//...
plugins: [
    babel({
        extensions: [ '.js', '.mjs', '.html', '.svelte' ],
        runtimeHelpers: true,
        exclude: [ 'node_modules/@babel/**','node_modules/core-js/**' ],
        presets: [
            [
            '@babel/preset-env',
            {
                targets: '> 0.25%, not dead',
                useBuiltIns: 'usage',
                corejs: 3
            }
            ]
        ],
        plugins: [
            '@babel/plugin-syntax-dynamic-import',
            [
            '@babel/plugin-transform-runtime',
            {
                useESModules: true
            }
            ]
        ]
        })
//...
]}

in the html code use this to refer to your main.js

<script defer data-main="/build/main.js" src='/require.js'></script>

where /require.js is the path to require.js found at this address : require.js

Get started

Install the dependencies...

npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

Building and running in production mode

To create an optimised version of the app:

npm run build

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes