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.