ES6如何将模块“导入”另一个模块

Question

我已经导入了一个mapboxgl 模块，然后我尝试导入第二个“子模块”地理编码器，如import 'mapbox-gl-geocoder'; 和import mapboxgl.Geocoder from 'mapbox-gl-geocoder';，但这显然是错误的方法，因为我只收到错误@ 987654325@。如何正确地做到这一点？详情如下...

我正在尝试将 Mapbox geocoding example 与 ES6（和 webpack）一起使用。

该示例使用了 2 个这样的 mapbox js 库（跳过文件中不感兴趣的部分）：

<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-script (mapbox-gl) 时，我可以像这样很好地使用它：

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

但是当我尝试像这样包含“子模块”mapbox-gl-geocoder 时遇到了麻烦（我很可能以错误的方式导入第二个脚本）：

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 global，这是一个半心半意的 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';
...