Vue Workbox Webpack“不能在模块外使用导入语句”答案

【问题标题】：Vue Workbox Webpack "cannot use import statement outside a module"Vue Workbox Webpack“不能在模块外使用导入语句”
【发布时间】：2020-09-22 12:57:09
【问题描述】：

我第一次尝试使用工作箱，但总是收到以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module

这是我的 src-sw.js

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

我在工作箱文档中找不到有关此问题的任何内容。我该如何处理？

【问题讨论】：

它完全令人困惑。 @mishamosher 说您必须使用 importscripts，但工作箱网站上的所有示例都使用导入
@SimonH 工作箱网站上的示例假设您正在使用 webpack、Rollup、Parcel 或其他东西之类的转译器/打包器。这是解释here。 Binu 描述的错误表明没有使用转译器/捆绑器，并且支持这种情况，如 here 和 here 所述。
@SimonH 另外，如果确实使用了转译器/打包器，here 提供了有关如何正确配置它的更多信息。

标签： vue.js webpack progressive-web-apps service-worker workbox

【解决方案1】：

您可以查看Get Started 指南以开始使用 Workbox。

此外，您还不能在 ServiceWorkers 中使用 ES 模块。在这里查看更多信息：https://stackoverflow.com/a/45578811/1273042

【讨论】：