用Deck.GL作为Webpack外挂

Question

我目前正在开发两个不同的React应用程序，它们使用Deck.GL来呈现两个映射，每个映射具有不同的层类型。但是，当将它们作为独立工具使用时，它们都能很好地工作，但是，当这两个映射安装在同一个父应用程序中时，我访问的第二个映射就会崩溃(因为加载了库两次左右)。

考虑到这一点，我将Deck.GL添加到两个应用程序的Webpack外部，并向父应用程序添加了unpkg链接。但是，这会产生一个“无法解决'h3'”错误，所以我也将h3-js放在外部，但是它一直在Deck.GL javascript上搜索它。我的下一步是从@deck.gl/core、@deck.gl/ step、@deck.gl/层等导入，并且只加载所需的内容，但我得到了一个类似的错误，因为它在@deck.gl/层中搜索'luma‘。

那么，我如何正确地将Deck.GL定义为Webpack的外部呢？

编辑：

将deck.gl添加到外部时所遇到的错误：

无法从https://unpkg.com/deck.gl@7.3.6/dist.min.js解析裸说明符"h3“

当我导航到使用不同层的第二张地图时出现的错误：

这个错误似乎是在使用角路由在页面中导航时启动的，如果我使用简单的<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