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'),
      },
    },

变量＆＃34; root＆＃34;在文件的前面定义了引用项目的根目录，与package.json等在同一级别。

在react-map-gl-alt中你可能会发生同样的问题，你需要使用别名＆＃39; mapbox＆＃39; to＆＃39; node_modules / mapbox / dist / distfilehere.js＆＃39;。

Answer 2

要扩展medv的答案，当前，在您的package.json中，您需要添加mapbox-gl v0.270 - v0.38.0，如：

使用signInWithCustomToken时

"mapbox-gl": ">=0.27.0 <=0.38.0。

这解释为at the 'Requires' line here＆amp;如果您查看package.json中的"@mapbox/mapbox-gl-draw": "^1.0.1"。

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

2 个答案: