Workbox

Question

我目前正在使用 workbox-webpack-plugin:

中的 GenerateSW 插件生成服务工作者文件

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

生成的 sw.js 文件包含由注入其中的 GenerateSW 插件生成的代码。但是，这段代码没有转译，我需要转译，因为 Google 决定用什么 ecmascript 版本编写它与我无关。我可以在 webpack 具有运行之后使用 babel 转译 sw.js 文件，但我想知道是否有一种方法可以简单地自动转译该文件（最好使用相同的 env 信息webpack 本身使用)?

Answer 1

假设您使用的是 workbox-webpack-plugin v5+，您可以 pass in babelPresetEnvTargets 配置生成的 service worker 的转译过程。

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

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

Workbox - 如何让 webpack 转译 service worker 文件？

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

webpack

workbox-webpack-plugin