Question

我在webpack捆绑的应用程序中遇到麻烦，包括mapbox-gl和@ mapbox / mapbox-gl-draw。我发现mapbox应该包含在dist版本中，所以我需要这样：require('mapbox-gl/dist/mapbox-gl.js')（与Draw相同），并且它在dev中工作正常，但在运行时在生成构建时崩溃，我们得到错误，例如{ {1}}

是否需要配置？

Answer 1

好的，我找到了解决方案，发布在各种问题上。首先，我们可以使用mapbox和mapbox-gl的常规需求来简化：

e is not defined

我们只需要指定webpack实际上指向它们的构建版本，所以我们添加一个别名：

const mapboxgl = require('mapbox-gl');
const MapboxDraw = require('@mapbox/mapbox-gl-draw');

但运行时的错误是由于我在webpack配置中使用Uglify这一事实引起的。因此，当我们使用dist版本时，已经缩小的mapbox包再次通过uglify。为了避免这种情况，我们需要告诉webpack不要处理mapbox包，所以我们在webpack配置中有以下规则：

resolve: {
    ...
    alias: {
      'mapbox-gl': 'mapbox-gl/dist/mapbox-gl.js',
      '@mapbox/mapbox-gl-draw': '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js',
    }
  }

使用mapbox-gl和@ mapbox / mapbox-gl-draw与webpack

1 个答案: