Glob-паттерны для включения и исключения файлов

Glob-паттерны в контексте Workbox представляют собой строки, которые задают набор файлов для обработки сервис-воркером. Они позволяют гибко управлять тем, какие ресурсы кэшировать, а какие игнорировать.

Основы синтаксиса Glob

  1. * — соответствует любому количеству любых символов в пределах одного уровня директории. Пример:

    globDirectory: 'dist/',
globPatterns: ['*.js']

    Это выберет все файлы с расширением .js в директории dist/, но не затронет поддиректории.

  2. ** — рекурсивное совпадение во всех поддиректориях. Пример:

    globPatterns: ['**/*.css']

    Это позволит включить все CSS-файлы во всех поддиректориях.

  3. ? — соответствует одному любому символу. Пример:

    globPatterns: ['icon?.png']

    Подойдет для файлов icon1.png, iconA.png, но не icon10.png.

  4. [abc] — соответствует любому символу из скобок. Пример:

    globPatterns: ['file[12].js']

    Выберет file1.js и file2.js, но не file3.js.

  5. [a-z] — диапазон символов. Пример:

    globPatterns: ['file[a-c].js']

    Соответствует filea.js, fileb.js, filec.js.

Исключение файлов с помощью globIgnores

Workbox позволяет не только включать файлы, но и исключать их через опцию globIgnores. Синтаксис glob здесь аналогичен.

Пример исключения минифицированных файлов:

workboxBuild.generateSW({
  globDirectory: 'dist/',
  globPatterns: ['**/*.{js,css,html}'],
  globIgnores: ['**/*.min.js', '**/*.map']
});

В этом случае все JS, CSS и HTML-файлы будут включены, кроме минифицированных JS и файлов карт.

Комбинирование включения и исключения

Можно задавать несколько шаблонов одновременно:

globPatterns: ['**/*.js', '**/*.css', '!**/test-*.js']

Важно: при использовании отрицательных шаблонов (!) в globPatterns Workbox трактует их как исключения, аналогично globIgnores.

Особенности работы с поддиректориями

  • Паттерны с ** охватывают все уровни вложенности.
  • Паттерны без ** применяются только к текущей директории, указанной в globDirectory.
  • Использование **/* часто требуется для создания полного кэша всех ресурсов.

Поддержка расширенных синтаксисов

Workbox поддерживает также расширенные выражения:

  • {js,css} — выбор нескольких расширений в одном паттерне:

    globPatterns: ['**/*.{js,css}']

  • {dir1,dir2} — выбор нескольких директорий:

    globPatterns: ['{app,lib}/**/*.js']

Практические рекомендации

  1. Минимизировать число файлов в кэше. Использовать строгие паттерны для включения только необходимых ресурсов.
  2. Игнорировать временные и тестовые файлы через globIgnores или отрицательные паттерны.
  3. Проверять вложенность: шаблоны без ** не захватывают поддиректории, что может приводить к неожиданным пропускам.
  4. Использовать фигурные скобки для сокращения списка паттернов и повышения читаемости конфигурации.

Пример полной конфигурации Workbox с glob-паттернами

import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{html,js,css,png,jpg,svg}',
    '!**/admin/**',
    '!**/*.map'
  ],
  globIgnores: [
    '**/draft-*.html'
  ],
  swDest: 'dist/sw.js',
  clientsClaim: true,
  skipWaiting: true
});

В этом примере сервис-воркер будет кэшировать все основные ресурсы, исключая административные страницы, карты исходников и черновики, обеспечивая точное управление кэшем на уровне файловой структуры.

Оглавление