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脚本（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());

如何将子模块“添加”到主模块？当我尝试这个时，我只会收到以下错误：

未捕获的ReferenceError：未定义mapboxgl

由于它在我添加两行'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';
...

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

1 个答案: