Блог

У меня есть изящное приложение в комплекте с rollup, в котором я хочу, чтобы сгенерированные ресурсы ( bundle.js и bundle.css ) были отпечатаны с помощью хэша, на который ссылаются эти файлы в index.html .

Мне легко удалось выполнить первую часть с помощью entryFileNames :

   {
    input: 'src/main.js',
    output: {
      sourcemap: true,
      format: 'iife',
      name: 'app',
      entryFileNames: '[name].[hash].js',
      dir: 'public/build'
    },
    // ...
 

Но замена имени ресурса с отпечатками пальцев (скажем, main.1a2b3c4d.js ) в index.html является сложной частью.

Я планировал иметь src/index.html файл, содержащий некоторые подобные маркеры <script defer src='<% jsBundle %>'></script> , и некоторую конфигурацию свертки, которая позволила бы мне заменить эти маркеры именем хэшированных файлов, сгенерировав public/index.html файл, который содержит <script defer src='/public/main.1a2b3c4d.js'></script> .

Я не уверен в том, как обрабатывать HTML-файл (накопительный пакет, похоже, не позволяет файлам ввода быть ничем иным, кроме файлов JS). И даже после этого мне нужно было бы знать, как найти имя активов с отпечатками пальцев, чтобы произвести замену.

Я не знаю ни о каких существующих модулях npm, которые могли бы сделать это за вас, но вы можете «легко» написать для этого свой собственный накопительный плагин. Разработка накопительного плагина

Хук, который вы искали бы, — writeBundle это хук, который запускается после того, как все ваши файлы были записаны, и, как следует из документации, он выдаст вам список всех создаваемых файлов.

В рамках этого хука вы можете затем использовать что-то вроде replace-in-file, чтобы открыть свои index.html и заменить заполнители сгенерированными файлами.

Отказ от ответственности: я сам этого не пробовал, но это не выглядит слишком сложным. Вы также можете использовать этот хук для генерации самого хэша, объединив эти два, вы действительно получите хороший пакет, если вам захочется внести свой вклад в сообщество 🙂