Workbox - how to have the service worker file transpiled by webpack?

Question

I am currently generating a service worker file using the GenerateSW plugin from workbox-webpack-plugin:

new GenerateSW({
    cacheId: 'foo',
    clientsClaim: true,
    inlineWorkboxRuntime: true,
    runtimeCaching: [
         {
              urlPattern: /^https:\/\/fonts\.googleapis\.com.*/,
              handler: 'StaleWhileRevalidate',
         },
    ],
    skipWaiting: true,
    sourcemap: false,
    swDest: 'sw.js',
}),

This resulting sw.js file contains code that is produced by the GenerateSW plugin injected into it. But, this code is not transpiled and I need it to be, because Google's decision about what ecmascript version to write it in is independent to mine. I can transpile the sw.js file using babel after webpack has run, but I was wondering if there is a way for this file to simply be automatically transpiled (preferably using the same env information that webpack itself uses)?

Answer 1

Assuming you're using workbox-webpack-plugin v5+, you can pass in babelPresetEnvTargets to configure the transpilation process of the generated service worker.

new GenerateSW({
  // Use the Array<string> syntax from
  // https://babeljs.io/docs/en/babel-preset-env#targets
  babelPresetEnvTargets: ['chrome >= 80'],

  // ...other options...
}),