如何使用 workbox-webpack-plugin injectMode 将其他文件导入 service worker 文件？

Question

我正在使用 vue-cli 和 workbox-webpack-plugin injectMode

new InjectManifest({
  swSrc: './src/sw.ts',
  swDest: 'sw.js',
}),

在sw.ts中，我尝试导入其他文件

import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { WorkboxPlugin, setCacheNameDetails, RouteHandler } from 'workbox-core'
import { CacheableResponsePlugin } from 'workbox-cacheable-response'
import { ExpirationPlugin } from 'workbox-expiration'
import Strategies, { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies'

// import other file
import { CustomMessage, MessageType, MESSAGE_META, SWRouting } from './utils/registerSW'

但是在构建APP的时候会失败，

error:  js/chunk-2d213953.a6b52dae.js from Terser
Unexpected token: punc (:) [js/chunk-2d213953.a6b52dae.js:3,12]

当我删除这个导入语句时，构建工作正常。

那么，我可以导入其他文件吗？怎么样？

Answer 1

一般来说，您尝试执行的操作应该有效。 InjectManifest 插件将为您的 swSrc 文件启动 webpack 子编译，并将继承您为主要父编译设置的任何插件和配置。它应该能够将 ES 模块捆绑到最终的 service worker 中。

听起来好像在其中一个 ./utils/registerSW 导入中有一些特定的东西导致 Terser 无法解析捆绑的代码。我建议先从 ./utils/registerSW 导入一个非常小的无操作函数，然后确认它是否有效。然后尝试从 ./utils/registerSW 一次导入这些函数中的每一个，直到找到导致问题的函数，并检查原始源代码以查看可能触发它的原因。

可能 InjectManifest 启动的子编译配置错误，也许这是由于需要修复的错误，但我会从先进行这些调试步骤。

如何使用 workbox-webpack-plugin injectMode 将其他文件导入 service worker 文件？

How can I import other file in service worker file using workbox-webpack-plugin injectMode?

workbox

vue-cli