webpack - 在 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 也是如此），它在 dev 中工作正常，但在生产构建时在运行时崩溃，我们得到诸如e is not defined

是否需要任何配置？

Answer 1

好的，我找到了解决方案，发布了各种问题。首先，为了简单起见，我们可以使用 mapbox 和 mapbox-gl 的常规 require：

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$/
}