Использование mapbox-gl и @mapbox/mapbox-gl-draw с веб-пакетом

Question

У меня проблемы с включением mapbox-gl и @mapbox/mapbox-gl-draw в прилагаемое приложение webpack. Я обнаружил, что mapbox должен быть включен в дистрибутивную версию, поэтому мне нужно вот так: require('mapbox-gl/dist/mapbox-gl.js') (то же самое для Draw), и он отлично работает в dev, но вылетает во время выполнения при производственной сборке, мы получаем такие ошибки, как e is not defined

Нужен ли какой-либо конфиг?

Answer 1

Хорошо, я нашел решение, размещенное по разным вопросам. Прежде всего, мы можем использовать обычные требования mapbox и mapbox-gl для простоты:

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

Нам просто нужно указать в веб-пакете, что они на самом деле указывают на их версию сборки, поэтому мы добавляем псевдоним:

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

Но ошибка во время выполнения была вызвана тем, что я использую Uglify в своем конфиге веб-пакета. Таким образом, пакет mapbox, уже уменьшенный при использовании версии dist, был снова помещен через uglify. Чтобы избежать этого, нам нужно указать webpack не обрабатывать пакет mapbox, поэтому у нас было следующее правило в конфигурации webpack:

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