Wie kann Webpack Browserversionen von Submodulen als Bibliotheksautor laden?

Question

Ich bin der Autor von arangojs, die sowohl im Browser als auch in node.js funktionieren soll, aber für einige seiner Interna verschiedene Implementierungen benötigt, abhängig von der Umgebung, in der sie verwendet wird (z. B. HTTP-Anfragen und ähnliches).

Die Standardkonfiguration von Webpack 1 hatte resolve.extensions Satz .web.js.webpack.js und mit Priorität über .js einschließen, die webpack erlaubt Targeting spezifisch von Browser-Implementierungen von Submodulen Bereitstellung .web.js anstelle von .js als Dateierweiterung verwendet wird.

Dieser Ansatz ist jedoch fragil und die Standardkonfiguration von Webpack 2 enthält diese beiden nicht mehr. Ein anderer Weg wäre es, Substitute explizit in der Konfiguration zu definieren, aber auch dies ist fragil und erfordert bewusste Anstrengungen am Ende des Benutzers.

Bereitstellung von zwei verschiedenen Versionen des gleichen Moduls auf npm (zB arangojs-node und arangojs-browser) scheint die zuverlässigste Ansatz zu sein, aber straft Benutzer schreiben Universal-Anwendungen, weil sie jetzt müssen explizit beide installieren (und noch zu Chaos mit ihrer Konfiguration um universellen Code zu laden, falls nötig.

Als Bibliotheksautor habe ich keine direkte Kontrolle über die Konfiguration des Webpacks des Benutzers. In der Praxis bedeutet dies, dass ich den Benutzern mitteilen muss, dass sie ihre Konfiguration manuell aktualisieren müssen.

Was ist der beste Ansatz für den Umgang mit dieser Situation? Es scheint keine etablierten Best Practices für Bibliotheksautoren in der Webpack-Community zu geben.

Answer 1

Twitter Benutzer @codemixers und Dan Abramov wies mich darauf hin, dass sowohl Webpack 1 und 2 the browser field specification implementiert haben, die verwendet werden können, um Ersatz zu definieren. Dies wurde auch von browserify seit praktisch immer eingehalten, so dass es das Problem universell lösen sollte.

Insbesondere erfordert dies ein neues Feld Hinzufügen browser zum package.json Abbilden des relativen Pfades jeden Servermoduls zu jeder entsprechenden Browser-Modul:

"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 diese Lösung mit Webpack getestet 2 und bestätigt, dass das Bündel umfasst die richtigen Dateien und versucht nicht, die Server-Dateien und verwandte Abhängigkeiten zu laden, so scheint dies der Weg zu sein für Drittanbieter-Bibliotheken wie arangojs zu gehen.

Massives Dankeschön vor allem an Codemix, der mich auf die URL der eigentlichen Spezifikation (die schwer sein kann, nach Namen allein zu finden) zeigte.