在 webpack 中使用 mapbox-gl 和 @mapbox/mapbox-gl-draw

Question

我在 webpack 捆绑应用程序中包含 mapbox-gl 和 @mapbox/mapbox-gl-draw 时遇到问题。我发现 mapbox 应该包含在 dist 版本中，所以我这样要求：require('mapbox-gl/dist/mapbox-gl.js')（与 Draw 相同），它在开发中工作正常，但在生产构建运行时崩溃，我们得到诸如 e is not defined

需要什么配置吗？

Answer 1

好的，我找到了解决方案，发布在不同的问题上。首先，为了简单起见，我们可以使用 mapbox 和 mapbox-gl 的常规要求：

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

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

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

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

module: {
    ...
    noParse: /(mapbox-gl)\.js$/
}

在 webpack 中使用 mapbox-gl 和 @mapbox/mapbox-gl-draw

Using mapbox-gl and @mapbox/mapbox-gl-draw with webpack

webpack

mapbox-gl

mapbox-gl-draw