Buffer - это базовый API Node.js, полезный при работе с бинарными данными. В этой статье будет кратко рассмотрено, как полифилить Buffer API для браузерных сред с помощью Webpack 5.

Зачем нам нужно полифилить буфер?

При работе в среде браузера API-интерфейсы Node.js, такие как Buffer, недоступны. Иногда в среде браузера доступны сопоставимые API. Однако автору сторонних библиотек и кода, которые вы можете использовать, пришлось бы либо заменить конкретные API-интерфейсы Node.js, которые они используют, версиями браузера, либо предоставить другой механизм для предоставления вашего API для удовлетворения потребностей библиотек.

К сожалению, авторы библиотек часто не рассматривают среды браузера, или их библиотека могла не быть предназначена для использования в среде браузера. В этих случаях популярно использовать инструмент сборки, такой как Webpack, для замены конкретных API-интерфейсов Node.js, используемых библиотекой, версией, которая предоставляет API-интерфейс, совместимый со средой браузера, известный как полифиллинг.

Webpack v5

До Webpack v5 полифиллинг многих API-интерфейсов Node.js выполнялся автоматически. С v5 Webpack больше не будет автоматически полифицировать API-интерфейсы Node.js.

Решение проблемы

Установите полифилл

Во-первых, нам нужно будет установить или иным образом предоставить реализацию Buffer, совместимую с браузером. Для своих нужд я нашел подходящий пакет feross / buffer.

Приведенная ниже команда установит buffer как dev зависимость.

npm install -D buffer

Настроить резервный вариант Webpack

Параметр конфигурации Webpack resolve.fallback позволяет нам настроить Webpack для использования предоставленного пакета в качестве «запасного варианта» для API, которые изначально не доступны в целевых средах, для которых создается Webpack (например, в браузере).

/ в конце buffer/ может показаться вам странным, как и мне. Однако это рекомендовано buffer документацией из-за того, как работает алгоритм поиска модуля Node.js.

Чтобы явно потребовать этот модуль, используйте require ('buffer /'), который сообщает алгоритму поиска модуля node.js (также используемому браузером) использовать модуль npm с именем buffer вместо основного модуля node.js с именем buffer!

Настроить Webpack ProvidePlugin

Webpack ProvidePlugin предоставляет механизм для внедрения модуля / значения в качестве замены / API для глобальных переменных, которые в противном случае не были бы определены. Например, в Node.js вы можете использовать класс Buffer из глобального пространства имен без каких-либо операторов import или require. Класс Buffer будет неопределенным в среде браузера и без ProvidePlugin.

Мы можем предоставить совместимую реализацию класса Buffer через массив plugins конфигурации Webpack, чтобы преодолеть это.

Предоставленный массив (['buffer', 'Buffer']) сообщает webpack.ProvidePlugin установить глобальное значение Buffer для экспорта Buffer из пакета buffer.

Например:

const Buffer = require(‘buffer/’).Buffer;

Все вместе

Ниже приведен пример комбинированных соответствующих частей конфигурации Webpack для полифилляции класса Buffer с помощью Webpack v5.

Заключение

Теперь, когда вы настроили Webpack для глобального полифила класса Buffer, вы должны иметь возможность ссылаться и создавать экземпляр класса Buffer без надоедливой Uncaught ReferenceError: Buffer is not defined ошибки. Кроме того, любая ссылка на Buffer в библиотеках, включенных в ваш «комплект», теперь должна также ссылаться на предоставленный полифилл.

Наконец, не забудьте сообщить мне в комментариях ниже (или в Твиттере), помог ли вам это руководство каким-либо образом!

Первоначально опубликовано на https://viglucci.io/how-to-polyfill-buffer-with-webpack-5.