Использование Deck.GL в качестве внешнего Webpack

В настоящее время я разрабатываю два разных приложения React, которые используют Deck.GL для рендеринга двух карт, каждая с разным типом слоя. При использовании их как автономных они оба работают отлично, однако, когда они монтируются в одном и том же родительском приложении, вторая карта, которую я посещаю, дает сбой (из-за загрузки библиотеки два раза или около того).

Учитывая это, я добавил Deck.GL во внешние элементы Webpack обоих приложений и добавил ссылку unpkg на родительское приложение. Однако это дает ошибку «Невозможно разрешить 'h3'», поэтому я также помещаю h3-js во внешние, но он продолжает искать его в javascript Deck.GL. Следующим моим шагом было импортирование из @ deck.gl / core, @ deck.gl / response, @ deck.gl / Layers и т. Д. И загрузка только того, что необходимо, но я получил аналогичную ошибку, поскольку искал ' luma 'в @ deck.gl / Layers.

Итак, как мне правильно определить Deck.GL как внешний Webpack?

Изменить:

Ошибка, которую я получаю при добавлении deck.gl к externals:

Невозможно разрешить пустой спецификатор "h3" из https://unpkg.com/[email protected]/dist.min.js

Ошибки при переходе на вторую карту, которая использует разные слои: image Кажется, эта ошибка возникает при использовании маршрутизации Angular для навигации по странице. Если я использую простой <a href>, они работают отлично, потому что при этом перезагружается вся страница и не загружаются два экземпляра библиотеки.


webpack reactjs micro-frontend deck.gl h3
person Oriol_IL    schedule 02.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема была вызвана неправильными внешними конфигурациями веб-пакетов и ошибками при выборе пакетов для импорта из unpkg / jsdelivr. Если кто-то столкнется с той же проблемой, просто посмотрите на собственный веб-сайт Дека:

 config.externals = { 
   'highlight.js': 'hljs', 
   'h3-js': 'h3', 
   'deck.gl': 'deck', 
   '@deck.gl/aggregation-layers': 'deck', 
   '@deck.gl/core': 'deck', 
   '@deck.gl/extensions': 'deck', 
   '@deck.gl/geo-layers': 'deck', 
   '@deck.gl/layers': 'deck', 
   '@deck.gl/mesh-layers': 'deck', 
   '@loaders.gl/core': 'loaders', 
   '@luma.gl/core': 'luma', 
   'mapbox-gl': 'mapboxgl' 
 };

https://github.com/uber/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/webpack.config.js#L128-L141

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<script src="https://unpkg.com/h3-js"></script>
<script src="https://bundle.run/[email protected]"></script>
<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>

person Oriol_IL    schedule 14.01.2020