Question

我正在尝试为带有工作箱4.3.1的Polymer 3生成服务工作者。

我想缓存的Bower和node_modules中有一些特定文件。

我尝试在globIgnores中添加“ en-in / node_modules / **”，并在globPattern中包含特定文件，例如-en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js。

我尝试的配置出现错误。我什至尝试添加globStrict：false。即使那样也没有帮助。

以下是我的工作箱配置：

    globDirectory: "dist",
    globPatterns: ["en-in/**/*.{js,json,css}",
        "en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js"],
    globIgnores: [
        "en-in/sw-reg.js",
        "en-in/sw-custom.js",
        "en-in/rev-manifest.json",
        "en-in/package.json",
        "en-in/workbox-v4.3.1/**/*",
        "en-in/node_modules/**"
    ],
    globStrict: false,

我遇到以下错误：

One of the glob patterns doesn't match any files. Please remove or fix the following: 
{
  "globDirectory": "dist",
  "globPattern": "en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js",
  "globIgnores": [
    "en-in/sw-reg.js",
    "en-in/sw-custom.js",
    "en-in/rev-manifest.json",
    "en-in/package.json",
    "en-in/workbox-v4.3.1/**/*",
    "en-in/node_modules/**",
    "**/service-worker.js"
  ]
}

Answer 1

在Workbox中进行遍历的code如下：

globbedFiles = glob.sync(globPattern, {
  cwd: globDirectory,
  follow: globFollow,
  ignore: globIgnores,
  strict: globStrict,
});

因为您以"en-in/node_modules/**"模式之一的形式传递globIgnores，所以"en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js"永远不会匹配任何内容。在glob module中，ignore始终优先。

您有多种方法可以解决此问题：

作为构建过程的一部分，将custom-elements-es5-adapter.*.js文件从node_modules中移出到另一个目录中，然后从该目录中进行加载。
将"en-in/**/*.{js,json,css}"中的globPatterns更改为"en-in/{dir1,dir2,dir3}/**/*.{js,json,css}"之类，以使其默认情况下与node_modules不匹配，然后从{{1}中删除"en-in/node_modules/**" }。然后，您可以将globIgnores留在"en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js"中，它将不再被忽略。
在globPatterns中更改您的"en-in/node_modules/**"，使其与globIgnores不匹配。（我忘记了这样做的语法，但是如果其他两个选项不起作用，您也许可以弄清楚。）

可能还有其他一些选择。但是希望这可以解释根本原因。

Answer 2

在此页面上的“聚合物3”注释下方为服务人员提供。他们让生活变得轻松:)

服务人员

已将Service Worker加载并注册到index.html文件中。但是，在开发过程中（为了使调试更加容易），Service Worker实际上并不存在，仅使用存根文件。

在构建期间会自动创建生产时间Service Worker，即通过运行npm run build或npm run build：static。该文件是基于polymer.json和sw-precache-config.js配置文件生成的，您可以在每个构建目录下找到它：

build/
├── es5-bundled/
|   └── service-worker.js
├── es6-bundled/
|   └── service-worker.js
├── esm-bundled/
|   └── service-worker.js
└── ...

默认情况下，所有源文件（在/ src目录中）都将被预先缓存，如sw-precache-config.js配置文件中所指定。如果您想更改此行为，请查看sw-precache-config文档。

来源：https://pwa-starter-kit.polymer-project.org/building-and-deploying

全局模式与任何文件都不匹配

2 个答案: