ES6 как импортировать модуль «на» другой модуль

Question

я уже импортировал mapboxgl модуль, то я пытаюсь импортировать второй «подмодуль» геокодер как import 'mapbox-gl-geocoder'; и как import mapboxgl.Geocoder from 'mapbox-gl-geocoder';, но это явно неправильный подход, так как я только получение ошибки Uncaught ReferenceError: mapboxgl is not defined. Как это сделать правильно? Подробности ниже ...

Я пытаюсь использовать Mapbox geocoding example с ES6 (и веб-пакет).

В данном примере используется 2 MapBox расслоение плотной библиотеки, как это (пропуск, не интересной части файла):

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

Итак, я хочу, чтобы «перевести» это мой проект, который использует ES6 (и Webpack) ,

Когда я использую только главный MapBox-скрипт (MapBox-ОЛ), я могу использовать это красиво, как это:

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

Но я получаю неприятности, когда я пытаюсь включить «подмодуль» mapbox- ГЛ-геокодер как это (я, скорее всего, импортировать второй скрипт неправильный путь):

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

Как можно «добавить» подмодуль к основному модулю? Когда я пытаюсь это, я только получаю следующее сообщение об ошибке:

Uncaught ReferenceError: mapboxgl is not defined

Поскольку он работает хорошо, прежде чем я добавил эти две линии 'import 'mapbox-gl-geocoder'; и map.addControl(new mapboxgl.Geocoder()); Я предполагаю, что я ввожу неправильно вторую библиотеку.

Answer 1

Второй пакет mapbox-gl-geocoder опирается на mapboxgl глобальный, частый случай поддержки половинного модуля CommonJS.

Использовать one of the several ways that Webpack provides, чтобы опубликовать 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'; 
...