parcel-plugin-svelte

A parcel plugin that enables svelte support

Getting Started

Install dependencies

yarn add parcel-bundler parcel-plugin-svelte @babel/polyfill -D

Update the package.json

Update your package.json to contain these scripts (for more information on these commands, see: https://parceljs.org/cli.html):

{
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  }
}

Create the files

Create an html file that will be used as the entrypoint, name it index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Plugin Svelte Example</title>
  </head>
  <body>
    <div id="demo"></div>

    <!-- This script tag points to the source of the JS file we want to load and bundle -->
    <script src="main.js"></script>
  </body>
</html>

Create a simple JavaScript file named main.js:

import '@babel/polyfill';
import App from './App.svelte';

const app = new App({
  target: document.getElementById('demo'),
  data: {
    name: 'world'
  }
});

Create a Svelte file named App.svelte:

<p>
  Hello { name }, the time is <span class="the-time">{ hours }:{ minutes }:{ seconds }</span>
</p>

<style>
  .the-time {
    font-weight: bold;
  }
</style>

<script>
  import { onMount } from 'svelte';

  export let name = 'Anonymous';
  let time = new Date();

  onMount(() => {
    const timer = setInterval(() => {
      time = new Date();
    }, 1000)

    return () => {
      clearInterval(timer);
    }
  })

  let hours, minutes, seconds;

  $: {
    hours = time.getHours();
    minutes = time.getMinutes();
    seconds = time.getSeconds();
  }
</script>

Configuration

The default configuration should work for most people but for anyone who would like to change the way svelte compiles the files there is the possibility to configure it.

This can be done though a svelte.config.js file, .svelterc file or svelte field in package.json.

For documentation on which parameters you can set and use look at the official svelte docs.

// Used by svelte.compile
compiler: {
  ...
},
// Used by svelte.preprocess
preprocess: {
  ...
}

Note: the use of compilerOptions property will be deprecated on the next major version, you should use thecompiler property instead.

CSS CompilerOptions

If you set compiler.css to false, CSS will be bundled in a separate file. It also enables post-transformations provided by Parcel such as PostCSS and file resolution for url().