Polymer 3 SPA中的Workbox，出现"process is not defined“

Question

聚合物3 SPA正在尝试从sw-precahe迁移到Workbox。我使用workbox-window模块将生命周期集成到应用程序中，以便通知用户新版本。

我使用5.0.0-beta版本来使用-functionality()，但是这个问题在v4.3.1上也是有效的。在创建服务工作进程并运行我的SPA之后，我在logger.js中得到"process is not defined“。

我已经尝试过包含不同版本的workbox构建文件，如果我包含umd版本，它可以正常工作，但我的SPA构建是针对ES6模块的，所以我想使用这些导入。

"globDirectory": "./",
  "globPatterns": [
    "**/*.{js,css,json,svg,png,jpg,gif,html}",
    "manifest.json"
  ],
  "swDest": "service-worker.js",
  "globIgnores": ["node_modules/**/*", "build/**/*", "workbox-config.js"],
  "inlineWorkboxRuntime": "true",
  "maximumFileSizeToCacheInBytes": 10*1024*1024,
  "runtimeCaching":
  [
    {
      urlPattern: /\/node_modules\/@webcomponents\/webcomponentsjs\//,
      handler: 'StaleWhileRevalidate'
    },
    {
      urlPattern: /\/node_modules\/web-animations-js\//,
      handler: 'StaleWhileRevalidate',
    }
  ]

我的目标是理解为什么这会失败，因为我意识到我可能在我的配置中做错了什么。所以，任何建议都很受欢迎！

Answer 1

为此，您应该能够使用workbox-window.prod.mjs或workbox-window.dev.mjs包。它们作为ES模块发布，删除了process.env.NODE_ENV，以及其他一些优化。

您可以从CDN URL引用它们，也可以在本地提供它们-如果您从npm安装了workbox-window，则它们在npm下。

下面是一个例子：

<script type="module">
import {Workbox} from
  'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-window.prod.mjs';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/service-worker.js');

  // Use wb...
}
</script>