使用workbox-webpack-plugin时启用日志记录

Question

我的项目使用Workbox对服务人员进行了旧的部分实现。我一直在尝试更新和添加功能。在此过程中的某个地方，我丢失了开发控制台（Chrome版本81.0.4044.129）中的“工作箱”日志。

我不确定这是什么时候发生的，因为在我尝试升级和添加工作箱窗口时我没有特别注意它们，但是现在我希望它们回来。

我正在使用v5.1.3的workbox-webpack-plugin和workbox-window。

我的webpack配置看起来像这样：

      new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/src-serviceWorker.js',
        swDest: 'serviceWorker.js',
        exclude: [/\.map$/, /asset-manifest\.json$/]
      }),

我的服务工作者文件看起来像这样：

import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { CacheFirst } from 'workbox-strategies'


precacheAndRoute(self.__WB_MANIFEST)
self.__WB_DISABLE_DEV_LOGS = false


registerRoute(
  /https:\/\/api\.***\.com\/graphql/,
  new CacheFirst()
)

该应用程序本身是一个React应用程序，最初是使用create-react-app创建的，但此后被弹出。我只在进行生产构建时查找日志，然后使用http-server程序包在localhost上运行。

我已经检查了workbox debugging page，这就是为什么我在行self.__WB_DISABLE_DEV_LOGS = false中添加了它，但没什么区别。

有什么主意我该如何找回日志？当我尝试向服务人员添加移动功能时，这会使我的生活变得更加轻松。我还仔细检查了我是否在Chrome开发人员工具中可以看到所有级别的日志记录，包括详细的日志记录。

我还添加了自己的日志，并且确实显示了日志，因此我知道正在调用服务工作者。

Answer 1

不幸的是，这被埋在了当前文档中，但是我认为文档的“ Keeping dev-only code out of the bundle”部分解释了正在发生的事情。

Workbox的不受捆绑的源代码contains a lot of verbose logging statements，由if (process.env.NODE_ENV !== 'production') {...}子句保护。根据您的webpack automatically substitutes配置选项的值使用webpack或process.env.NODE_ENV来选择'development' 'production'。

因此，如果您在mode编译中使用mode: 'production'，您将获得一个虽然很小但不包含任何详细日志记录语句的Workbox软件包。 （仍然会有一些不太详细的错误记录。）

webpack很有用如果您使用的是Workbox的开发版本（即，如果在捆绑步骤中将self.__WB_DISABLE_DEV_LOGS = false替换为process.env.NODE_ENV，但您仍要禁用详细的日志记录。