ES6 wie Modul „auf“ einem anderen Modul importieren

Question

Ich habe bereits eine mapboxgl Modul importiert, dann versuche ich die zweiten „Submodul“ Geocoder wie import 'mapbox-gl-geocoder'; und wie import mapboxgl.Geocoder from 'mapbox-gl-geocoder';, aber das ist offensichtlich falscher Ansatz zu importieren, da ich nur bin den Fehler bekommen Uncaught ReferenceError: mapboxgl is not defined. Wie macht man das richtig? Details unter ...

Ich versuche, die Mapbox geocoding example mit ES6 (und webpack) zu verwenden. Ich möchte zu „übersetzen“, dies zu meinem Projekt

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script> 
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.js'></script> 
... 
<script> 
    ... 
    var map = new mapboxgl.Map({ 
     ... 
    }); 

    map.addControl(new mapboxgl.Geocoder()); 
    ... 
</script> 
... 

Also dann, die ES6 (und webpack) verwendet:

Das Beispiel verwendet 2 MapBox js Bibliotheken wie diese (nicht interessanter Teil der Datei übersprungen) .

Wenn ich nur die Haupt MapBox-Skript (MapBox-gl), das kann ich schön wie diese verwenden:

import mapboxgl from 'mapbox-gl'; 
let map = new mapboxgl.Map({ 
    ... 
}); 

Aber ich habe Schwierigkeiten bekommen, wenn ich versuche, das „Modul“ erweitert mapbox- gl-Geocoder so (ich höchstwahrscheinlich das zweite Skript in die falsche Richtung importieren):

import mapboxgl from 'mapbox-gl'; 
import 'mapbox-gl-geocoder'; 
let map = new mapboxgl.Map({ 
    ... 
}); 
map.addControl(new mapboxgl.Geocoder()); 

Wie kann ich „add“ um das Submodul zu dem Hauptmodul? Als ich dies versuchen, erhalte ich nur die folgende Fehlermeldung:

Uncaught ReferenceError: mapboxgl is not defined

Da es schön, bevor ich arbeitet hinzugefügt, um die beiden Linien 'import 'mapbox-gl-geocoder'; und map.addControl(new mapboxgl.Geocoder()); Ich vermute, dass ich falsch die zweite Bibliothek bin importieren.

Answer 1

Das zweite Paket mapbox-gl-geocoder stützt sich auf mapboxgl global, ein häufiger Fall von halfhearted CommonJS Modulunterstützung.

Verwenden Sie one of the several ways that Webpack provides, um mapbox-gl Modul exportiert als mapboxgl globale Variable. Die gute Sache ist, dass mapbox-gl-geocoder erwartet mapboxgl (nicht unbedingt window.mapboxgl), bedeutet dies, dass Webpack mapboxgl lokale Variable injizieren kann, und es wird immer noch wie vorgesehen.

oder ein Helfer-Modul erstellen diese zu bündeln Umgebung unabhängig zu machen. Erstellen Sie eine Datei mit einem Namen wie mapbox-gl-helper.js:

import mapboxgl from 'mapbox-gl'; 
window.mapboxgl = mapboxgl; 
export default mapboxgl; 

Dann verwenden Sie diese in der Datei, wo Sie es so brauchen:

import mapboxgl from './mapbox-gl-helper'; 
import Geocoder from 'mapbox-gl-geocoder'; 
...