ecmascript-6 - ES6如何导入模块 "onto"另一个模块

Question

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

我正在尝试使用 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全局，一个半心半意的 CommonJS 模块支持的常见案例。

使用one of the several ways that Webpack provides揭露mapbox-gl模块导出为 mapboxgl全局变量。好在mapbox-gl-geocoder预计 mapboxgl (不一定是 window.mapboxgl )，这意味着 Webpack 可以注入(inject) 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';
...