Svelte with Babel for IE11

Question

I'm using svelte with Rollup. And I need to support IE11

My current babel config in rollup.config.js is:

babel({
            extensions: [ '.js', '.mjs', '.html', '.svelte' ],
            exclude: 'node_modules/**',
            presets: [
                [
                '@babel/env',
                {
                    modules: 'false',
                    targets: {
                    browsers: '> 1%, IE 11, not op_mini all, not dead',
                    node: 8
                    },
                    useBuiltIns: 'usage'
                }
                ]
            ]
        }),

Please help me with configuring, now my app breaks both at IE and others(Chrome,Mozilla).

Answer 1

You can use the configuration for the Babel plugin that is used in Sapper as a reference:

babel({
  extensions: ['.js', '.mjs', '.html', '.svelte'],
  runtimeHelpers: true,
  exclude: ['node_modules/@babel/**'], // <= /!\ NOT 'node_mobules/**'
  presets: [
    ['@babel/preset-env', {
      // adapter to ensure IE 11 support
      targets: '> 0.25%, not dead, IE 11'
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-transform-runtime', {
      useESModules: true
    }]
  ]
}),

The important thing to note is that you can't exclude your whole node_modules from processing by Babel. The reason is that Svelte's code itself (i.e. under node_modules/svelte) needs to be transpiled for IE 11 support. Similarly, if you use third-party Svelte components, they will probably live under node_modules, yet require transpilation.

Another tricky bit to know is that transpiled code cannot be compatible with non transpiled code. In particular, ES6+ classes (that are used for Svelte components) are not compatible with their ES5 transpiled counterparts ("can't extend from non class, yada yada..."). So you will have to make sure that all your Svelte code is either transpiled with the same rules, or not transpiled at all...

Here's another example that uses (almost) the same config in a raw Svelte (i.e. non-Sapper) project.

Both links point to template projects, so you can easily clone & run them to try it for yourself. (If you want to use the second example, please notice that my link does not point to the master branch, so you'll have to checkout the right branch to try the babel config.)