Как сделать webpack загружать версии браузера подмодулей в качестве автора библиотеки?

Question

Я являюсь автором arangojs, который предназначен для работы как в браузере, так и в узле.js, но для некоторых его внутренних компонентов требуется различная реализация в зависимости от среды, в которой он используется (например, для создания HTTP-запросов и т. Д.).

Конфигурация по умолчанию Webpack 1 имел resolve.extensions набор включает .web.js и .webpack.js с приоритетом над .js, что позволило нацеливание Webpack специально, обеспечивая реализацию браузера подмодулей использованием .web.js вместо .js в качестве расширения файла.

Но этот подход является хрупким, и по умолчанию конфигурация Webpack 2 уже не включает эти два. Другим способом было бы явно определить заменители в конфигурации, но опять же это хрупкое и требует сознательных усилий на конце пользователя.

Предоставление два различных версий одного и тот же модуль на НОМ (например arangojs-node и arangojs-browser), кажется, самый надежный подход, но наказывает пользователь, пишущие универсальные приложения, потому что они теперь должны явно установить оба (и все равно придется возиться с их конфигурацией для обеспечения универсальной загрузки кода любой из двух по необходимости).

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

Каков наилучший подход для решения этой проблемы? По-видимому, не существует каких-либо установленных рекомендаций для авторов библиотек в сообществе webpack.

Answer 1

Пользователи Twitter @codemixers и Dan Abramov указали мне, что оба Webpack 1 и 2 реализовали the browser field specification, которые могут быть использованы для определения заменителей. Это также соблюдалось с помощью браузера, так как практически навсегда, поэтому оно должно решить проблему повсеместно.

В частности, это требует добавления нового поля browser к package.json отображения относительного пути каждого серверного модуля для каждого соответствующего модуля браузера:

"browser": { 
    "./lib/util/btoa.js": "./lib/util/btoa.web.js", 
    "./lib/util/bytelength.js": "./lib/util/bytelength.web.js", 
    "./lib/util/multipart.js": "./lib/util/multipart.web.js", 
    "./lib/util/request.js": "./lib/util/request.web.js" 
} 

Я испытал это решение с Webpack 2 и подтвердил, что в комплекте правильные файлы и не пытается загружать файлы сервера и связанные с ними зависимости, поэтому, похоже, это путь для сторонних библиотек, таких как arangojs.

Массивное спасибо вам особенно за codemix, который указал мне на URL-адрес фактической спецификации (которая может быть трудно отследить только по имени).