2

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

鉴于此，我将 Deck.GL 添加到两个应用程序的 Webpack 外部，并添加了一个指向父应用程序的 unpkg 链接。但是，这给出了“无法解析‘h3’”错误，所以我也将 h3-js 放在了外部，但它一直在 Deck.GL javascript 上搜索它。我的下一步是从@deck.gl/core、@deck.gl/react、@deck.gl/layers 等导入，只加载需要的内容，但在搜索 ' 时出现类似错误@deck.gl/layers 中的亮度'。

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

编辑：

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

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

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

4

1 回答 1

0

该问题是由不正确的 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

于 2020-01-14T09:42:35.283 回答