webpackはライブラリ作成者としてブラウザのサブモジュールをロードする方法を教えてください。

Question

私はarangojsの著者で、ブラウザとnode.jsの両方で動作するように意図されていますが、使用されている環境（たとえばHTTPリクエストなど）によって内部実装の一部が異なる必要があります。

のWebPACK 1のデフォルト設定は、ファイル拡張子として.web.js代わりに.jsを使用してサブモジュールのブラウザの実装を提供することによって、具体的にWebPACKのを標的とせ.js優先と.web.jsと.webpack.jsを含めるresolve.extensionsセットを持っていました。

しかし、このアプローチは脆弱で、Webpack 2のデフォルト設定ではこれらの2つが含まれなくなりました。別の方法は、構成内の代替を明示的に定義することですが、やはりこれは脆弱であり、ユーザー側で意識的な努力をします。

npm（例：arangojs-nodeとarangojs-browser）に同じモジュールの2つの異なるバージョンを提供することは、最も信頼性の高いアプローチであると思われますが、今や明示的に両方をインストールする必要があるためユニバーサルコードを必要に応じて2つのいずれかにロードする）。

ライブラリーの作者として私はユーザーのウェブパック構成を直接制御することはできません。実際には、ユーザーに構成を手動で更新する必要があります。

この状況を処理するための最良の方法は何ですか？ Webpackコミュニティには、図書館の作家のための確立されたベストプラクティスはないようです。

Answer 1

Twitterユーザー@codemixersとDan Abramovは、Webpack 1とWebpack 2の両方が代用品の定義に使用できるthe browser field specificationを実装していることを指摘しました。これはbrowserifyによっても尊重されてきました。

具体的に、これはそれぞれ、対応するブラウザモジュールに各サーバーモジュールの相対パスをマッピングpackage.jsonに新しいフィールドbrowserを追加する必要があります。

"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" 
} 

IはWebPACKの2と、この溶液を試験し、バンドルが含まれていることを確認しました正しいファイルとサーバーファイルと関連する依存関係を読み込もうとしないので、これはarangojsのようなサードパーティライブラリに行く方法と思われる。

Massiveは、実際の仕様のURL（名前だけでは追跡するのが難しい場合があります）を指摘してくれたcodemixに特に感謝します。