Svelte for IE11 with Babel transpiler on Snowpack

Question

In an attempt to transpile Svelte components for Internet Explorer 11 web browser with Snowpack running Babel. Using configurations bellow. Only the src/index.js file is transpiled to ES5 syntax. Files related to Svelte framework remain containing ES6 and ESM after running npm run build.

Any clues about what to do to transpile Svelte related files with Snowpack and Babel?

package.json

{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.12.17",
    "@babel/preset-env": "^7.12.17",
    "@snowpack/plugin-babel": "^2.1.6",
    "@snowpack/plugin-dotenv": "^2.0.5",
    "@snowpack/plugin-svelte": "^3.5.0",
    "snowpack": "^3.0.1",
    "svelte": "^3.24.0"
  }
}

snowpack.config.js

module.exports = {
  mount: {
    // Mount "public" to the root URL path ("/*") /build dir
    public: {url: '/', static: true},
    // Mount "src" to the root of the /build/dist dir
    src: {url: '/dist'},
  },
  plugins: [
    '@snowpack/plugin-svelte',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-babel',
  ],
  optimize: {
    preload: false,
    bundle: true,
    splitting: false,
    treeshake: true,
    manifest: false,
    minify: false,
  },
};

babel.config.js

module.exports = function(api) {
    api.cache(true);
    const presets = [
        [
            '@babel/preset-env',
            {
                targets: {
                    ie: "11"
                },
                useBuiltIns: "usage",
                corejs: 3.6,
                modules: false,
            }
        ]
    ];
    const plugins = [
        '@babel/plugin-syntax-dynamic-import',
        [
            '@babel/plugin-transform-runtime', {
                useESModules: false,
            }
        ]
    ];
    return {
        presets,
        plugins,
    }
}

The Old and the New, the hated and the loved... – phaleth Feb 25 '21 at 17:52 — phaleth, Feb 25 '21 at 17:52

phaleth · Accepted Answer · 2021-02-27T20:08:46.837

The key is to use @snowpack/plugin-webpack. The answer is as what follows.

package.json

{
  "scripts": {
    "dev": "snowpack dev",
    "start": "snowpack build --watch",
    "build": "snowpack build"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.17",
    "@snowpack/plugin-babel": "^2.1.6",
    "@snowpack/plugin-svelte": "^3.5.2",
    "@snowpack/plugin-webpack": "^2.3.0",
    "babel-loader": "^8.2.2",
    "snowpack": "^3.0.13",
    "svelte": "^3.34.0"
  }
}

snowpack.config.js

const path = require('path');

module.exports = {
  mount: {
    // Mount "public" to the root URL path ("/*") /build dir
    public: {url: '/', static: true},
    // Mount "src" to the root of the /build dir
    src: {url: '/'},
  },
  plugins: [
    "@snowpack/plugin-svelte",
    "@snowpack/plugin-babel",
    [
      '@snowpack/plugin-webpack',
      {
        outputPattern: {
          js: "index.js",
          css: "index.css",
        },
        extendConfig: config => {
          delete config.optimization.splitChunks;
          delete config.optimization.runtimeChunk;
          config.module.rules[0] = {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'babel-loader',
                options: { presets: ['@babel/preset-env'] }
              },
              {
                loader: path.resolve(__dirname, './node_modules/@snowpack/plugin-webpack/plugins/import-meta-fix.js')
              },
              {
                loader: path.resolve(__dirname, './node_modules/@snowpack/plugin-webpack/plugins/proxy-import-resolve.js')
              }
            ]
          }
          return config;
        }
      }
    ]
  ],
  optimize: {
    preload: false,
    bundle: false,
    splitting: false,
    treeshake: true,
    manifest: false,
    minify: false,
  },
};

babel.config.json

{
    "presets": [
      [
        "@babel/preset-env",
        {
            "targets": {
                "ie": "11"
            },
            "modules": false
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
}

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Web site created using create-snowpack-app" />
    <title>Snowpack App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="/index.js"></script>
  </body>
</html>

Output of npm run build

> build
> snowpack build

[snowpack] ! building source files...
[snowpack] ✔ build complete [0.38s]
[snowpack] ! building dependencies...
[snowpack] ✔ dependencies ready! [0.26s]
[snowpack] ! verifying build...
[snowpack] ✔ verification complete [0.00s]
[snowpack] ! writing build to disk...
[snowpack] ! optimizing build...
    Asset       Size  Chunks             Chunk Names
index.css  228 bytes       0  [emitted]  index
 index.js   7.93 KiB       0  [emitted]  index
[snowpack] ✔ optimize complete [1.78s]
[snowpack] ▶ Build Complete!

Svelte for IE11 with Babel transpiler on Snowpack

1 Answers1