你如何使用 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 的答案，目前，在您的 package.json 中，您需要添加 mapbox-gl v0.270 - v0.38.0，例如：

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

这是解释at the 'Requires' line here & if you look at the peerDependencies in the package.json。

你如何使用 webpack 导入 mapbox-gl-draw？

how do you import mapbox-gl-draw using webpack?

mapbox

mapbox-gl-js