如何使用workbox-webpack-plugin injectMode在服务工作者文件中导入其他文件？

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'

但是当开发应用程序时，它会失败，

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

当我移除这个导入状态时，构建工作就正常了。

那么，我可以导入其他文件吗？怎么做到的？

Answer 1

一般说来，你想要做的事情应该是可行的。InjectManifest插件将为您的swSrc文件启动一个webpack子编译，并继承为您的主父编译设置的任何插件和配置。它应该能够将ES模块捆绑到最终的服务工作人员中。

不过，听起来其中一个./utils/registerSW导入中有一些特定的东西，使得Terser无法解析捆绑的代码。我建议从从./utils/registerSW导入一个非常小的、没有操作的函数开始，并确认这是可行的。然后尝试一次从./utils/registerSW导入每个函数，直到找到引起问题的函数为止，并检查原始源代码，看看可能触发它的是什么。

InjectManifest启动的子编译可能配置错误，这可能是由于需要修复的bug造成的，但我将首先从这些调试步骤开始。