ES6 how to import a module "onto" another module

Question

I already imported the module mapboxgl, then I try to import the second "submodule" geocoder, for example import 'mapbox-gl-geocoder';, it seems import mapboxgl.Geocoder from 'mapbox-gl-geocoder';, but this is obviously the wrong approach, since I get an error Uncaught ReferenceError: mapboxgl is not defined. How to do it right? Details below ...

I am trying to use the Mapbox Geocoding Example with ES6 (and webpack).

In this example, 2 boxbox js libraries are used (skipping the uninterested part of the file):

<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>
...

So, I want to "translate" this into my project that uses ES6 (and webpack).

When I use only the main mapbox - script (mapbox-gl), I can use it like this:

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

, "subodule" mapbox-gl-geocoder, (, , script):

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

"" ? , :

ReferenceError: mapboxgl

, 'import 'mapbox-gl-geocoder'; map.addControl(new mapboxgl.Geocoder());, , .

Answer 1

mapbox-gl-geocoder mapboxgl , HalfMarked CommonJS.

, Webpack , mapbox-gl mapboxgl. , mapbox-gl-geocoder mapboxgl ( window.mapboxgl), , Webpack mapboxgl, .

, . mapbox-gl-helper.js:

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

, :

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