如何使用 workbox-webpack-plugin injectionMode 在服务工作人员文件中导入其他文件？答案

【问题标题】：How can I import other file in service worker file using workbox-webpack-plugin injectMode?如何使用 workbox-webpack-plugin injectionMode 在服务工作人员文件中导入其他文件？
【发布时间】：2023-03-11 01:59:01
【问题描述】：

我正在使用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]

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

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

【问题讨论】：

标签： vue-cli workbox

【解决方案1】：

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

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

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

【讨论】：

非常感谢。就像你说的，我找到了原因，因为我在./utils/registerSW 中使用了import('workbox-window')。我不知道为什么，但是异步导入会导致 Terser 构建错误。