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

Question

У меня проблемы с включением 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 для простоты, используя:

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

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

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