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

如何解决如何使用 workbox-webpack-plugin injectMode 在 service worker 文件中导入其他文件？

我正在使用 def create_dict(path): p = r"C:\Users\z004ca5b\LinkedInHTMLs\Z0000CYC.html" with open(p,encoding='utf8') as f: page_html = bs(f,"html.parser") #find name #section = page_html.find('section',{"class":"pv-top-card artdeco-card ember-view"}) div = page_html.find('div',{"class":"artdeco-entity-lockup__title ember-view" 'id="ember237"'}) name = div.get_text().strip() 和 vue-cli workBox-webpack-plugin

injectMode

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

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

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

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'

当我删除此导入语句时，构建运行良好。

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

解决方法

一般来说，您尝试做的事情应该可行。 InjectManifest 插件将为您的 webpack 文件启动 swSrc 子编译，并将继承您为主要父编译设置的任何插件和配置。它应该能够将 ES 模块捆绑到最终的 Service Worker 中。

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

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