Workbox-如何通过Webpack转换服务工作者文件?

时间:2020-05-01 12:33:57

标签: webpack workbox workbox-webpack-plugin

我目前正在使用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文件,但是我想知道是否有一种方法可以简单地自动编译该文件(最好使用与webpack本身相同的env信息) ?

1 个答案:

答案 0 :(得分:3)

假设您正在使用workbox-webpack-plugin v5 +,则可以pass in babelPresetEnvTargets来配置生成的服务工作者的翻译过程。

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

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