如何使用WebPack导入MapBox-GL-Draw

Question

我正在使用create-react-app并尝试安装mapbox-gl-draw。

npm install @mapbox/mapbox-gl-draw

这与一些NPM警告一起使用。然后，我尝试将mapbox-gl-draw纳入这样的组件：

import React,{Component} from 'react';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import ReactMapboxGl from 'react-mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'
console.log(MapboxDraw)

我只得到一个空的对象。

我正在使用Create-react-app。我需要使用其他WebPack .config文件吗？

导入这样的MapBox模块的最佳方法是什么？

Answer 1

如果您使用的是WebPack，则需要别名使用mapbox-gl dist文件，这是我使用webpack2的方法：

    resolve: {
      modules: ['src', 'node_modules'],
      extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
      alias: {
        // mapbox-gl related packages in webpack should use dist instead of the default src
        '@mapbox/mapbox-gl-draw': path.resolve(root, 'node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js'),
      },
    },

变量" root"是在文件前面定义的，以参考项目的根目录，与package.json等相同的级别。

。

在React-Map-Gl-Alt中可能会发生同样的问题，其中您需要将" mapbox"与'node_modules/mapbox/dist/distfilehere.js'。

Answer 2

以在Medv的答案上扩展，在当前，在您的软件包中。

"mapbox-gl": ">=0.27.0 <=0.38.0使用"@mapbox/mapbox-gl-draw": "^1.0.1"。

这是在此处的"需求"行中解释的＆amp;如果您查看包装中的peerDependencies。