Я использую плагин workbox webpack с vue cli 3 и хотел бы исключить добавление файлов в папку в манифест предварительного кэша.
См. мою текущую файловую структуру ниже
/ источник
/активы
/css
/оболочка
file1.svg
file2.svg
file3.svg
/svg
file4.svg
file5.svg
file6.svg
Я хочу включить файлы в папке оболочки в свой манифест предварительного кэша, но я не хочу включать файлы в папку svg.
Я пытался использовать параметры globигнорирует и исключать для workboxOptions в файле vue.config.js, но не получил желаемого результата.
Когда я попробовал globIgnores: ['src/assets/svg/*'], ничего не произошло, так как все файлы включены
Когда я попробовал exclude: [/\.svg$/], он исключил файлы svg в обеих папках.
Я попытался изменить шаблон соответствия для параметра исключения, как показано ниже, но это тоже не сработало:
exclude: [/^file4.*\.svg$/,
/^file5.*\.svg$/,
/^file6.*\.svg$/]
🤔 А знаете ли вы, что...
Vue.js можно использовать с различными инструментами разработки, такими как Vue CLI.
Я столкнулся с похожей проблемой, если не с такой же, и смог найти ответ, немного посмотрев на документы здесь:
https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generateSW-exclude
Я хотел автоматически сгенерировать манифест предварительного кэша, но исключить определенную папку вместе с определенными именами файлов. Итак, мой vue.config.js теперь выглядит примерно так:
pwa: {
workboxOptions: {
exclude: [
/index\.html$/,
/client-config\.js$/,
/^.*folder-to-exclude/.*$/,
]
}
}
Свойства исключить/включить представляют собой массивы регулярных выражений или строк. Причина, по которой ваше выражение для исключать подобрало все файлы svg, заключается просто в том, что согласно вашему регулярному выражению вы ищете все, что заканчивается на .svg.
Вы можете попробовать что-то вроде этого:
module.exports = {
pwa: {
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxOptions: {
include: [
/^.*shell/.*$/,
],
exclude: [
/^.*svg/.*$/,
]
}
}
};
Имейте в виду, что, поскольку мы указали включать, нам не нужно будет использовать исключать, поскольку Webpack захватывает только то, что вы просили в включать. Однако я добавил оба включить/исключить в приведенном выше примере ради этого ответа.
Один из способов протестировать все это без сборки снова и снова — перейти в корень папки, в моем случае папку публичный, и выполнить эту команду:
find .
Это должно рекурсивно получить список всех файлов/папок и вернуть что-то вроде этого:
.
./svg
./svg/safari-pinned-tab.svg
./svg/safari-pinned-tab-2.svg
./svg/safari-pinned-tab-1.svg
./favicon.ico
./index.html
./shell
./shell/android-chrome-192x192.png
./shell/android-chrome-512x512.png
./img
./img/icons
./img/icons/favicon-16x16.png
./img/icons/safari-pinned-tab.svg
./img/icons/apple-touch-icon-120x120.png
./img/icons/android-chrome-192x192.png
./img/icons/apple-touch-icon.png
./img/icons/apple-touch-icon-152x152.png
./img/icons/apple-touch-icon-180x180.png
./img/icons/apple-touch-icon-76x76.png
./img/icons/android-chrome-512x512.png
./img/icons/msapplication-icon-144x144.png
./img/icons/mstile-150x150.png
./img/icons/apple-touch-icon-60x60.png
./img/icons/favicon-32x32.png
./robots.txt
Затем возьмите этот вывод и перейдите на regex101.com и попробуйте выражения включать и исключать, которые соответствуют вашему варианту использования. Вот пример:
https://regex101.com/r/nzEwCz/2/
Я считаю, что это просто поможет сузить выражение, и вам нужно будет уточнить его в своей среде IDE. Я знаю, что это довольно подробный ответ, и если у вас есть какие-либо вопросы, просто прокомментируйте ниже.
Примечание: Выражения могут отличаться в окне Windows, см. этот вопрос/ответ: https://stackoverflow.com/a/38190159/128795