使用 Deck.GL 作为 Webpack 外部

Question

我目前正在开发两个不同的 React 应用程序，它们使用 Deck.GL 渲染两个地图，每个地图都有不同类型的图层。当它们作为独立使用时，它们都可以完美地工作，但是，当两者安装在同一个父应用程序中时，我访问的第二张地图崩溃了（由于加载库两次左右）。

鉴于此，我向两个应用程序的 Webpack 外部添加了 Deck.GL，并向父应用程序添加了一个 unpkg link。然而，这给出了一个 "Unable to resolve 'h3'" 错误，所以我也将 h3-js 放在外部但它一直在 Deck.GL javascript 上搜索它。我的下一步是从 @deck.gl/core、@deck.gl/react、@deck.gl/layers 等导入，只加载需要的内容，但我遇到了类似的错误因为它在@deck.gl/layers.

中搜索 'luma'

那么，如何正确定义 Deck.GL 作为 Webpack 外部？

编辑：

将 deck.gl 添加到外部时出现的错误：

Unable to resolve bare specifier "h3" from https://unpkg.com/deck.gl@7.3.6/dist.min.js

导航到使用不同图层的第二张地图时出现的错误：似乎这个错误是在使用 Angular 路由浏览页面时启动的，如果我使用简单的 <a href> 它们可以完美地工作，因为它会重新加载整个页面并且不会加载库的两个实例。

Answer 1

问题是由不正确的 webpack 外部配置和错误选择要从 unpkg/jsdelivr 导入的包引起的。如果有人遇到同样的问题，请查看 Deck 自己的网站：

 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/s2-geometry@1.2.10"></script>
<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>

https://github.com/uber/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/src/static/index-prod.html#L17-L19

使用 Deck.GL 作为 Webpack 外部

Using Deck.GL as Webpack external

reactjs

webpack

deck.gl

h3

micro-frontend