glob 模式与任何文件工作箱都不匹配

Question

我正在尝试使用工作箱 4.3.1 为 Polymer 3 生成服务工作者。

我在 bower 中有一些特定的文件，node_modules我想缓存。

我尝试将 "en-in/node_modules/**" 添加到 globIgnores 并在 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

下面是服务工作者页面上的 Polymer 3 注释。他们让生活变得轻松 :)

Service Worker

Service Worker 已加载并在 index.html 文件中注册。但是在开发过程中（为了方便调试），Service Worker实际上并不存在，只使用了一个存根文件。

生产时间 Service Worker 在构建时自动创建，即通过运行ning npm 运行 build 或 npm 运行 build:static。这个文件是根据 polymer.json 和 sw-precache-config.js 配置文件生成的，你可以在每个构建目录下找到它：

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

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

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

Answer 2

在 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 并移至另一个目录，然后从那里加载它。
将 globPatterns 中的 "en-in/**/*.{js,json,css}" 更改为类似 "en-in/{dir1,dir2,dir3}/**/*.{js,json,css}" 的内容，使其在默认情况下不匹配 node_modules，并从 [= 中删除 "en-in/node_modules/**" 12=]。然后你可以在globPatterns中留下"en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js"，它就不会再被忽略了。
更改 globIgnores 中的 "en-in/node_modules/**"，使其与 en-in/node_modules/@webcomponents 不匹配。（我忘记了这样做的语法，但如果其他两个选项不起作用，您可能会弄明白。）

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

glob 模式与任何文件工作箱都不匹配

glob patterns doesn't match any files workbox

service-worker

workbox

polymer-3.x